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
anddirection
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 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::marker | Chrome
Full support
80
| Edge
Full support
80
| Firefox Full support 68 | IE No support No | Opera No support No | Safari Full support 11.1 | WebView Android No support No | Chrome Android
Full support
80
| Firefox Android Full support 68 | Opera Android No support No | Safari iOS Full support 11.3 | 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.