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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support | No support |