`::marker` CSS pseudo-element

Limited availability

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

See full compatibility

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

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

	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`	Chrome – Full support Chrome 86 (Release date: 2020-10-20) footnote Full support	Edge – Full support Edge 86 (Release date: 2020-10-09) footnote Full support	Firefox – Full support Firefox 68 (Release date: 2019-07-09) footnote Full support	Opera – Full support Opera 72 (Release date: 2020-10-21) footnote Full support	Safari – Partial support Safari 11.1 (Release date: 2018-04-12) footnote Partial support footnote Safari support is limited to `color` and `font-size`. footnote See bug 204163	Chrome Android – Full support Chrome Android 86 (Release date: 2020-10-20) footnote Full support	Firefox for Android – Full support Firefox for Android 68 (Release date: 2019-07-09) footnote Full support	Opera Android – Full support Opera Android 61 (Release date: 2020-12-07) footnote Full support	Safari on iOS – Partial support Safari on iOS 11.3 (Release date: 2018-03-29) footnote Partial support footnote Safari on iOS support is limited to `color` and `font-size`. footnote See bug 204163	Samsung Internet – Full support Samsung Internet 14 (Release date: 2021-04-17) footnote Full support	WebView Android – Full support WebView Android 86 (Release date: 2020-10-20) footnote Full support	WebView on iOS – Partial support WebView on iOS 11.3 (Release date: 2018-03-29) footnote Partial support footnote WebView on iOS support is limited to `color` and `font-size`. footnote See bug 204163
Animation and transition support	Chrome – Full support Chrome 86 (Release date: 2020-10-20) footnote Full support	Edge – Full support Edge 86 (Release date: 2020-10-09) footnote Full support	Firefox – Full support Firefox 80 (Release date: 2020-08-25) footnote Full support	Opera – Full support Opera 72 (Release date: 2020-10-21) footnote Full support	Safari – Full support Safari 14.1 (Release date: 2021-04-26) footnote Full support	Chrome Android – Full support Chrome Android 86 (Release date: 2020-10-20) footnote Full support	Firefox for Android – Full support Firefox for Android 80 (Release date: 2020-08-31) footnote Full support	Opera Android – Full support Opera Android 61 (Release date: 2020-12-07) footnote Full support	Safari on iOS – Full support Safari on iOS 14.5 (Release date: 2021-04-26) footnote Full support	Samsung Internet – Full support Samsung Internet 14 (Release date: 2021-04-17) footnote Full support	WebView Android – Full support WebView Android 86 (Release date: 2020-10-20) footnote Full support	WebView on iOS – Full support WebView on iOS 14.5 (Release date: 2021-04-26) footnote Full support
`counter-increment`, `counter-reset`, and `counter-set` support Experimental	Chrome – No support Chrome footnote No support	Edge – No support Edge footnote No support	Firefox – Full support Firefox 147 (Release date: 2026-01-13) footnote Full support	Opera – No support Opera footnote No support	Safari – No support Safari footnote No support	Chrome Android – No support Chrome Android footnote No support	Firefox for Android – Full support Firefox for Android 147 (Release date: 2026-01-13) footnote Full support	Opera Android – No support Opera Android footnote No support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – No support Samsung Internet footnote No support	WebView Android – No support WebView Android footnote No support	WebView on iOS – No support WebView on iOS footnote No support
`quotes` support Experimental	Chrome – No support Chrome footnote No support	Edge – No support Edge footnote No support	Firefox – Full support Firefox 147 (Release date: 2026-01-13) footnote Full support	Opera – No support Opera footnote No support	Safari – No support Safari footnote No support	Chrome Android – No support Chrome Android footnote No support	Firefox for Android – Full support Firefox for Android 147 (Release date: 2026-01-13) footnote Full support	Opera Android – No support Opera Android footnote No support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – No support Samsung Internet footnote No support	WebView Android – No support WebView Android footnote No support	WebView on iOS – No support WebView on iOS footnote No support

Tip: you can click/tap on a cell for more information.

Full support: Full support
Partial support: Partial support
No support: No support
: Experimental. Expect behavior to change in the future.

::marker CSS pseudo-element

Legend

`::marker` CSS pseudo-element