This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

::marker {
  color: blue;
  font-size: 1.2em;
}

Allowable properties

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

Syntax

::marker

Example

HTML

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

CSS

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

Result

Specifications

Specification Status Comment
CSS Pseudo-Elements Level 4
The definition of '::marker' in that specification.
Working Draft No significant change.
CSS Lists Module Level 3
The definition of '::marker' in that specification.
Working Draft Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No ? No No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No ? No No No ?

See also

Document Tags and Contributors

 Contributors to this page: fscholz, Tigt, mfluehr, wbamberg, cPhost, TylerH, cvrebert
 Last updated by: fscholz,