::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.
Try it
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
anddirection
properties- The
content
property - All animation and transition properties
Note: The specification states that additional CSS properties may be supported in 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 |
Browser compatibility
BCD tables only load in the browser