::marker
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The::markerCSSpseudo-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 todisplay: 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:
- Allanimation andtransition properties
- Allfont properties
colorcontentcounter-increment,counter-reset, andcounter-setquotestext-combine-upright,unicode-bidi, anddirectionwhite-space
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 |
Browser compatibility
See also
- HTML elements that have marker boxes by default:
<ol>,<li>,<summary> - CSS generated content module
- CSS lists and counters module
- CSS counter styles module