Home >CSS >CSS reference – properties, selectors, functions >::marker

::marker

li::marker summary::marker

Selects the marker of a list item – the bullet in a <ul>, the number in an <ol> or the triangle of a <summary>. Without extra elements in the HTML you can change the color or size of the bullets or replace them with a custom character.

Values

Only the font (font…), color, content, white-space, direction, unicode-bidi, text-combine-upright and animations and transitions can be used. Not margins, padding or backgrounds.

Examples

Orange numbers and a green check mark instead of a bullet:

<ol class="steps">
  <li>Choose products</li>
  <li>Pay</li>
</ol>
<ul class="benefits">
  <li>Free shipping</li>
  <li>Returns within 30 days</li>
</ul>

.steps li::marker {
  color: #e65100;
  font-weight: 700;
}
.benefits li::marker {
  content: "✓  ";
  color: #43a047;
}

The result: the numbers 1. and 2. are orange and bold, instead of dots there is a green check mark before the benefits. Safari does not show the check mark and shows a green dot.

Things to watch out for

Safari so far uses only color and font-size in ::marker; it ignores content (as of October 2026). Make a custom character that matters with list-style: none and ::before.
Only an element with display: list-item has a marker. Items in a list with display: flex or with list-style: none lose it.
::marker does not control the gap between the marker and the text – it is set by the padding-left of the list and the spaces in content.
Simpler changes (the bullet type, Roman numerals) are handled by list-style-type.

Browser support

Not Baseline yet: it does not work in all major browsers yet (without a prefix). Since version: Chrome 86, Firefox 68, Safari 11.1 (partially). As of October 2026 (MDN browser-compat-data).