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.
Allowable properties
Only certain CSS properties can be used in a rule with ::marker as a selector:
- All font properties
- The
white-spaceproperty colortext-combine-upright,unicode-bidianddirectionproperties- The
contentproperty - 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;
}