CSS ::marker pseudo-element

The ::marker pseudo-element represents the automatically generated marker box of a list item. Like ::before and ::after, ::marker is a tree-abiding pseudo-element, so it always fit within the box tree. But unlike ::before and ::after, currently it only accepts a small subset of safe properties, because the marker box layout is mostly undefined.

Being able to customize marker boxes, like changing their color or their contents. Without ::marker, developers are usually forced to apply the desired styles to the list item, wrap the contents of the list item into a container, and undo the styles in the container. However, this is not much semantic, and it only kind of works for inherited properties. Developers can customize the marker contents using list-style-type and list-style-image, but with these the marker is limited to either containing some text or an image. With ::marker, developers can use the content property for further customization, like mixing text with images, or including counters or quotes.



Working draft or equivalent

Status in Chromium


In development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.


Last updated on 2019-12-09