::marker

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.

Try it

Allowable properties

The ::marker pseudo-element supports a limited number of CSS properties, including:

Note: The specification states that additional CSS properties may be supported in the future.

Syntax

css
::marker {
  /* ... */
}

Examples

HTML

html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

CSS

css
ul li::marker {
  color: red;
  font-size: 1.5em;
}

Result

Specifications

Specification
CSS Pseudo-Elements Module Level 4
# marker-pseudo

Browser compatibility

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
::marker
Animation and transition support

See also