::marker

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

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 and direction properties
The content property
All animation and transition properties

Note: The specification states that additional CSS properties may be supported in 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	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`::marker`	86	86	68	No	72	11.1 Safari support is limited to `color` and `font-size`. See bug 204163.	86	86	68	61	11.3 Safari support is limited to `color` and `font-size`. See bug 204163.	14.0
`animation_and_transition_support`	86	86	80	No	72	No	86	86	No	61	No	14.0

Docs

Docs4dev

Title here