DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
::marker pseudo-element is for styling the stylistic marker of a list element. For example, the bullet point of a default
<ul> (e.g. •) or the numeral of a default
<ol> (e.g. 1.). This makes it extremely easy to do simple things like colorize them.
Like a pseudo-element, you’ll be able to select
::marker in DevTools to inspect, but it’s not really “in the DOM” like a normal element.
You can combine
::marker with the
content property to change what the marker is. For example, replacing list bullets with emoji (just not yet in Safari):
The markers are still list markers, so are subject to things like
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet
|Android Chrome||Android Firefox||Android||iOS Safari|