::marker

::marker styles the marker box of a list item—the bullet on a <ul> item, the number on a <ol> item, or the disclosure triangle on a <summary> element. Before it existed, customizing a marker's color or content meant hiding the real marker and faking one with ::before, or wrapping marker text in an extra <span>.

Basic usage

CSS

li::marker {
  color: #2563eb;
  font-weight: 700;
}

Worked example: custom-colored bullets

CSS

.feature-list {
  list-style: disc;
  padding-left: 1.25rem;
}

.feature-list li::marker {
  color: #22c55e;
  font-size: 1.1em;
}

HTML

<ul class="feature-list">
  <li>Automatic dark mode</li>
  <li>Offline support</li>
  <li>Keyboard shortcuts</li>
</ul>

Worked example: custom marker content

::marker also accepts the content property, letting you replace the bullet or number entirely—for example, with an emoji or a custom string—while keeping real, semantic <li> elements.

CSS

.checklist {
  list-style: none;
  padding-left: 0;
}

.checklist li {
  padding-left: 1.5rem;
}

.checklist li::marker {
  content: '✓  ';
  color: #22c55e;
  font-weight: 700;
}

Styling a <summary> disclosure triangle

CSS

summary::marker {
  color: #2563eb;
}

HTML

<details>
  <summary>Show more details</summary>
  <p>Here is the additional content that was hidden.</p>
</details>

::marker has a limited property set: color, font-* properties, content, white-space, and a few text-related properties—not the full box model.
It works on <li> elements and on <summary>'s built-in disclosure triangle.
Ordered list numbering still works through normal CSS counters even when you restyle the marker's color or font.

Note

::marker is a genuinely useful modern replacement for the older pattern of setting list-style: none and manually building a fake bullet with ::before, or wrapping the number or bullet in a <span> just so it could be targeted with CSS. It keeps the list semantically a real list while still giving styling control over the marker.