CSS pseudo element ::marker

::marker je pseudo‑element pro stylování značek seznamů u <ul> a <ol>. Umožňuje měnit vzhled teček a číslování.

Základy použití

li::marker {
  color: #2563eb;
  font-size: 1.1em;
}

Výchozí tvar značky řídí list-style-type (disc, circle, square, decimal, lower-roman…). ::marker pak upraví barvu a typografii.

Co lze stylovat

• Barvu: color
• Písmo: všechny vlastnosti font-* a font
• Mezery: white-space
• Obsah: content
• Pro odsazení použijte padding-left na seznamu nebo list-style-position.

Výměna symbolu přes content

ul li::marker { content: "– "; }

Zajímavé může být použít emoji.

Pro číslované seznamy lze využít vestavěný čítač list-item a vytvářet hierarchické číslování:

ol li::marker { content: counters(list-item, ".") ". "; }

Odsazení a zarovnání

ul {
  list-style-position: outside;
  padding-left: 1.25rem;
}

outside je výchozí a udržuje značku mimo text. inside posune značku do textového boxu, což ovlivní zalamování dlouhých řádků.

Použití s Tailwindem

V Tailwindu se marker používá následovně:

<ul class="list-disc pl-6 marker:text-blue-600 marker:font-medium">
  <li>První položka</li>
  <li>Druhá položka</li>
</ul>

Podpora

Moderní prohlížeče Chrome, Firefox, Safari, Edge ::marker podporují.

Pokud se přes marker nezasahuje do obsahu, ale spíš mění barvy, většinou se s tím dá smířit a není potřeba řešit fallback.

V dřívějších dobách se odlišná barva odrážky a textu položky seznamu řešila typicky dalším obalovým elementem, přes :before nebo obrázkem.

Odkazy

• MDN: ::marker
• Smashing Magazine: CSS Lists, Markers, And Counters
• Živá ukázka