W3cubDocs

/CSS

::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

Only certain CSS properties can be used in a rule with ::marker as a selector:

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

Syntax

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

Examples

HTML

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

CSS

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

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
::marker 86 86 68 No 72
11.1Safari support is limited to color and font-size. See bug 204163.
86 86 68 61
11.3Safari support is limited to color and font-size. See bug 204163.
14.0
animation_and_transition_support 86 86 80 No 72 No 86 86 No 61 No 14.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker