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; } 

::marker

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; } 

Allowable properties

Only certain CSS properties can be used in a rule with ::marker as a selector:

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 future.

Syntax

::marker

Examples

HTML

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

CSS

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

Result

Specifications

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

See also

HTML elements that have marker boxes by default: <ol>, <li>, <summary> Select your preferred language English (US)DeutschEspañolFrançais日本語Русский中文 (简体) Change language