CSS ::marker Pseudo-Element

Definition and Usage

The ::marker pseudo-element selects the marker box of a list item — typically the bullet or number. It works on any element set to display: list-item, such as li inside ul or ol.

Only a limited set of properties applies (color, fonts, content, and a few others). For full box styling of custom bullets, many authors still use ::before with list-style: none.

CSS Syntax

Example: li::marker { color: crimson; }.

Allowable Properties

::marker is not a value list — it accepts a short allowlist of CSS properties:

How to Use ::marker

Keep a real list, then style only the marker box.

1. Use a semantic ul or ol with li items (or another list-item).
2. Select li::marker (or a more specific selector).
3. Start with color and font-size for reliable styling.
4. Add content only after you verify support — or use ::before for full control.

Live Preview

Change marker color and optional content. If content does not change in your browser, that property is not applied to ::marker there.

CSS Examples

Each snippet focuses on ::marker with a short list. Use Try It Yourself for a live editor.

<style>
  ul li::marker {
    color: crimson;
    font-size: 1.5em;
  }
</style>

<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

<style>
  ul li::marker {
    color: #b91c1c;
    content: "→ ";
  }
</style>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<style>
  ol li::marker {
    color: #1d4ed8;
    font-weight: 700;
    font-size: 1.1em;
  }
</style>

<ol>
  <li>Plan</li>
  <li>Build</li>
  <li>Ship</li>
</ol>

Key Takeaways