CSS ::marker: Styling Ordered and Unordered Lists

The CSS ::marker pseudo-element targets the marker box of a list item, allowing developers to directly customize the appearance of bullets in unordered lists and numbers in ordered lists. Traditionally, styling these native indicators required cumbersome workarounds like hiding the default list style and rebuilding markers using ::before pseudo-elements. With ::marker, you can directly modify the color, size, font, and content of native list indicators using clean, modern CSS.

What is the ::marker Pseudo-Element?

In HTML, any element with a display: list-item property—most commonly <li> elements within ordered (<ol>) and unordered (<ul>) lists—generates a marker box alongside the principal block box. The ::marker pseudo-element specifically selects this marker box.

Before ::marker, the marker inherited styles directly from the <li>. If you wanted red text with a blue bullet, you had to wrap the text inside a <span>, color the <li> blue, and then color the <span> red. The ::marker pseudo-element eliminates this limitation.

Using ::marker with Unordered Lists

In unordered lists (<ul>), ::marker allows you to customize the default bullet point or replace it with custom characters, text, or emojis using the content property.

Changing Bullet Color and Size

ul li::marker {
  color: #e63946;
  font-size: 1.2em;
}

This changes only the bullet color and size without altering the accompanying text.

Replacing Bullets with Custom Content

ul li::marker {
  content: "✓ ";
  color: #2a9d8f;
}

Using the content property replaces standard circular bullets with custom symbols, strings, or emojis.

Using ::marker with Ordered Lists

In ordered lists (<ol>), ::marker lets you style the generated numbers, letters, or roman numerals without affecting the sequence or list item text.

Styling List Numbers

ol li::marker {
  color: #1d3557;
  font-weight: bold;
  font-family: monospace;
}

Customizing Number Suffixes

You can combine ::marker with CSS counters to customize how numbered lists are formatted:

ol {
  list-style-type: decimal-leading-zero;
}

ol li::marker {
  color: #457b9d;
  font-weight: 600;
}

Permitted CSS Properties

To maintain performance and prevent layout thrashing, browsers restrict which CSS properties can be applied to ::marker. You can only use properties that affect the text and typography of the marker:

• Typography: font, font-family, font-size, font-weight, font-style, font-variant
• Color: color
• Content: content
• Text Direction and Combination: direction, text-combine-upright, unicode-bidi
• Animation and Transitions: animation-*, transition-*

Properties affecting the box model (such as margin, padding, border, width, and background) are not supported on ::marker.

Key Advantages

• Cleaner HTML: Removes the need for redundant wrapper tags like <span> inside list items.
• Simplified CSS: Replaces complex list-style: none and li::before implementations.
• Preserved Accessibility: Native list semantics remain completely intact for screen readers, unlike custom implementations using pseudo-elements that hide the native marker.