Css ::marker Example
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
anddirection
properties- The
content
property - All animation and transition properties
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 | Status | Comment |
---|---|---|
CSS Pseudo-Elements Level 4 The definition of '::marker' in that specification. | Working Draft | No significant change. |
CSS Lists Module Level 3 The definition of '::marker' in that specification. | Working Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
::marker | 86 80 | 86 80 | 68 | No | 72 | 11.1 | 86 | 86 80 | 68 | 61 | 11.3 | No |
animation_and_transition_support | 86 83 | 86 83 | 80 | No | 72 | No | 86 | 86 83 | No | 61 | No | No |
Comments
Post a Comment