Web/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.

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

Allowable properties

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

All font properties
The white-space property
color
text-combine-upright, unicode-bidi and direction properties
The content property
All animation and transition properties

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

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`::marker`	Chrome Full support 86 Full support 86 Full support 80 Disabled' Disabled' From version 80: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 86 Full support 86 Full support 80 Disabled' Disabled' From version 80: this feature is behind the `Enable experimental Web Platform features` preference.	Firefox Full support 68	IE No support No	Opera No support No	Safari Full support 11.1	WebView Android Full support 86	Chrome Android Full support 86 Full support 86 Full support 80 Disabled' Disabled' From version 80: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 68	Opera Android No support No	Safari iOS Full support 11.3	Samsung Internet Android No support No
Animation and transition support	Chrome Full support 86 Full support 86 Full support 83 Disabled' Disabled' From version 83: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 86 Full support 86 Full support 83 Disabled' Disabled' From version 83: this feature is behind the `Enable experimental Web Platform features` preference.	Firefox Full support 80	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 86	Chrome Android Full support 86 Full support 86 Full support 83 Disabled' Disabled' From version 83: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.