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.

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

Allowable properties

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

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 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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
::marker 86
86
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.
86
86
80
Disabled
Disabled From version 80: this feature is behind the Enable experimental Web Platform features preference.
68 No No 11.1
Animation and transition support 86
86
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.
86
86
83
Disabled
Disabled From version 83: this feature is behind the Enable experimental Web Platform features preference.
80 No No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
::marker 86 86
86
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.
68 No 11.3 No
Animation and transition support 86 86
86
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.
No No No No

See also

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