demo · v131

::before::marker — styling the list marker inside a generated bullet

Before v131, you couldn't reach a ::marker that lived inside a generated ::before. The chain li::before::marker was rejected. Now you can style the marker of generated content, which unlocks editorial list patterns: typed bullet styles, custom number sequences with their own font, and per-list-item colour.

before v131 (single-level only)

  1. The marker is the platform default
  2. You couldn't style a generated marker
  3. Custom content went on ::before, but no further

v131 (nested marker styling)

  1. Marker now uses a typewriter font and an accent colour
  2. Without changing the layout
  3. Without giving up the native counter

swap the bullet

Bullet markers can pick up custom font, weight, and content. The unordered list below uses a star bullet generated through ::before with the native marker emptied.

  • typed lists need a different bullet
  • per-item colours mean status feedback in pure CSS
  • no list-style-image with all its bitmap limits

the api

/* Style the marker that lives inside a generated ::before */
li::before::marker {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--accent-blue);
}

/* Or the canonical ::marker via the spec - same idea */
li::marker { font-family: monospace; color: var(--accent-rose); }

see also

scenario focus

Select a scenario to focus its rendered example and summary.