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.

Example

  • cat
  • dog
  • bird
<div>
 <style>
 @scope {
  li::marker {
   all: revert;
   content: "😸 ";
  }
 }
 </style>

 <ul>
  <li>cat</li>
  <li>dog</li>
  <li>bird</li>
 </ul>
</div>

HTML list