`::marker` CSS pseudo-element

Baseline Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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:

All animation and transition properties
All font properties
color
content
counter-increment, counter-reset, and counter-set
quotes
text-combine-upright, unicode-bidi, and direction
white-space

Note: The specification states that additional CSS properties may be supported in the 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
CSS Pseudo-Elements Module Level 4 # marker-pseudo

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`marker`	86	86	68	72	11.1 Safari support is limited to `color` and `font-size`.	86	68	61	11.3 Safari on iOS support is limited to `color` and `font-size`.	14.0	86	11.3 WebView on iOS support is limited to `color` and `font-size`.
`animation_and_transition_support`	86	86	80	72	14.1	86	80	61	14.5	14.0	86	14.5
`counter_support`	No	No	147	No	No	No	147	No	No	No	No	No
`quotes_support`	No	No	147	No	No	No	147	No	No	No	No	No