The ::marker pseudo-element

The markers that appear at the start of list items—bullets in an unordered list, numbers in an ordered list—are generated by the browser during rendering. They don't correspond to any element in the HTML structure. The ::marker pseudo-element gives you a way to select and style those generated markers directly.

Pseudo-elements are a general CSS mechanism for targeting parts of a document that aren't represented in the document tree. For instance, p::first-line selects the first line of a paragraph even though no HTML element wraps that text. ::marker works the same way for list markers.

Support for ::marker is available in Chrome 86, Firefox 68, and Safari 11.1.

How markers are generated

Every list item element automatically receives a marker box, generated before both its actual contents and its ::before pseudo-element. List items are typically <li> elements, but any element with display: list-item gets a marker box too.

li {
  display: list-item;
}

div {
  display: list-item;
}

What you can style

Before ::marker, list styling was limited to list-style-type and list-style-image, which let you swap the symbol used. ::marker goes further, allowing you to change the color, size, and spacing of the marker, and to target markers individually or globally.

The marker pseudo-element accepts a constrained set of CSS properties:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

Notably, properties like background work with list-style-type but not with ::marker. That's because the former applies styles to the whole list item, while the latter pinpoints only the marker box. To change the marker's contents, use content rather than list-style-type.

Practical marker styling

To restyle every marker in a document, apply rules to the ::marker pseudo-element directly on list item selectors:

li::marker {
  color: hotpink;
}

li::marker {
  content: "<- ";
}

SVG can be used as marker content. Ordered list markers—which CSS treats as counters—can also be styled via ::marker, and you can draw on counter values to build custom numbering presentations, such as parentheses around each number.

Debugging

Chrome DevTools includes support for inspecting and modifying ::marker styles, which makes it easier to diagnose why a marker looks the way it does or why a style rule isn't applying.