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

530 Valid Hostname Is Expected When Setting Up IIS 10 For Multiple Sites

C Perror Example

Converting A String To Int In Groovy