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; }
Only certain CSS properties can be used in a rule with ::marker
as a selector:
::marker
<ul> <li>Peaches</li> <li>Apples</li> <li>Plums</li> </ul>
ul li::marker { color: red; font-size: 1.5em; }
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. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No | No | No | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | No | No | No | No | No | No |
© 2005–2018 Mozilla Developer Network 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