CSS: ::marker (for list item)

By Xah Lee. Date: . Last updated: .
tag::marker

Selects the marker box of a list item. It typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item.

marker is meant to replace list-style-type, list-style-image, list-style-position.

  • cat
  • dog
  • bird
<ul class="marker-gqbgW">
<li>cat</li>
<li>dog</li>
<li>bird</li>
</ul>
.marker-gqbgW li::marker {
 content: "✤ ";
 font-size: 1.5rem;
 color: red;
}

HTML list