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.

Documentation

Specification

Working draft or equivalent

Status in Chromium

Blink>CSS


No active development (tracking bug)

Consensus & Standardization

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

Owner

Last updated on 2019-10-03