::marker

Limited availability

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

The ::marker <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:

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

See also

Follow Lee on X/Twitter - Father, Husband, Serial builder creating AI, crypto, games & web tools. We are friends :) AI Will Come To Life!

Check out: eBank.nz (Art Generator) | Netwrck.com (AI Tools) | Text-Generator.io (AI API) | BitBank.nz (Crypto AI) | ReadingTime (Kids Reading) | RewordGame | BigMultiplayerChess | WebFiddle | How.nz | Helix AI Assistant