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 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No 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,