::marker

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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.

Try it

li::marker { content: "✝ "; font-size: 1.2em; }

<p>Group known as Mercury Seven:</p> <ul> <li>Malcolm Scott Carpenter</li> <li>Leroy Gordon (Gordo) Cooper Jr.</li> <li>John Herschel Glenn Jr.</li> <li>Virgil Ivan (Gus) Grissom</li> <li>Walter Marty (Wally) Schirra Jr.</li> <li>Alan Bartlett Shepard Jr.</li> <li>Donald Kent (Deke) Slayton</li> </ul>

Allowable properties

The ::marker pseudo-element supports a limited number of CSS properties, including:

All font properties
The white-space property
color
text-combine-upright, unicode-bidi, and direction properties
The content property
All animation and transition properties

Note: The specification states that additional CSS properties may be supported in the future.

Syntax

css

::marker { /* ... */ }

Examples

HTML

html

<ul> <li>Peaches</li> <li>Apples</li> <li>Plums</li> </ul>

CSS

css

ul li::marker { color: red; font-size: 1.5em; }

Result

Specifications

Specification
CSS Pseudo-Elements Module Level 4 # marker-pseudo