demo · v131

Breadcrumb Separators

Each separator in a breadcrumb is generated by ::after with display: list-item. Then ::after::marker targets just the marker box — giving the separator its own color and size, independently of the breadcrumb text. This nested pseudo-element chain was impossible before Chrome 131.

Note: Your browser does not yet support nested pseudo-element selectors (::after::marker). Separators will appear but cannot be styled independently. This feature ships in Chrome 131.

live — current ::after::marker rule

the code

The key is making ::after a list-formatting context with display: list-item. That creates a marker box, which ::after::marker can then style — a nested pseudo-element chain that was invalid before Chrome 131.

/* Step 1: generate a separator using ::after as a list item */
.breadcrumb-item::after {
  content: " ";
  display: list-item;
  list-style-type: " / ";      /* the separator character */
  list-style-position: inside;
}

/* Step 2: suppress separator after the last item */
.breadcrumb-item:last-child::after {
  content: none;
}

/* Step 3: style just the marker — new in Chrome 131 */
.breadcrumb-item::after::marker {
  color: var(--text-muted);    /* independent color from the link text */
  font-size: 0.8em;            /* independent size */
}

Without ::after::marker support, you could only set list-style-type on the element itself, and you couldn't apply a different color or size to just the separator glyph without wrapping it in an extra <span>.

the code

see also