::marker CSS Pseudo Element

The ::marker pseudo-element in CSS is used to style the marker box of list items, which is the bullet or number displayed by lists created with the li element inside ordered (ol) or unordered (ul) lists. Unlike traditional list styling techniques that manipulate the entire li element, ::marker specifically targets only the marker portion, giving developers finer control over appearance, including color, font, and content.

The ::marker pseudo-element supports a subset of CSS properties, primarily those related to text. Commonly used properties include color, font-size, font-family, font-style, and content. This makes it particularly useful for customizing bullet points or numbering styles without affecting the rest of the list item's content.

A practical example of ::marker usage is customizing bullets in an unordered list:

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

li::marker {
  color: darkorange;
  font-size: 1.2em;
  content: "→ ";
}

In this example, the default bullet is replaced with a right arrow and styled with a different color and size. Notably, ::marker cannot contain block-level elements, and properties like background-color or margin generally do not apply, as it only affects the inline marker box.

Additionally, ::marker works seamlessly with list counters in ordered lists, allowing customization of numeric markers. For example:

ol li::marker {
  font-weight: bold;
  color: teal;
  content: counter(list-item) ". ";
}

Here, each numbered list item’s marker is bold and colored teal, demonstrating how ::marker interacts with CSS counters and preserves semantic list structure while providing stylistic flexibility.