Skip to main content

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:


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

























































DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
::marker
86

80


86

80

68
No
72

11.1

Safari support is limited to color and font-size. See bug 204163

86

86

80

68
61

11.3

Safari support is limited to color and font-size. See bug 204163

No
animation_and_transition_support
86

83


86

83

80
No
72
No
86

86

83

No
61
No
No

See also




Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools