v131 · css

Nested pseudo elements styling

Allows to style pseudo elements that are nested inside other pseudo elements. So far, support is defined for: ::before::marker ::after::marker With ::column::scroll-marker being supported in the future.

concepts

  1. Nested pseudos

    Pseudo-elements can nest.

  2. Editorial drop-cap

    Apply ::first-letter to a generated ::before open-quote and to a generated ::after attribution byline.

  3. ::before::marker styling

    Side-by-side: a v130-era list vs a v131 list where the marker inside a generated bullet picks up its own font and colour.

  4. Nested pseudo playground

    Live CSS editor on the left, preview on the right. Switch between manuscript, terminal, and news presets — every chain uses nested pseudo-element styling.

  5. Checklist Markers

    An interactive task checklist where each item's checkbox symbol (○/✓) is styled via ::before::marker. A marker-style picker switches between four symbol sets; clicking tasks toggles their completion state.

  6. Breadcrumb Separators

    A navigable breadcrumb trail where separators are generated by ::after::marker. Pick separator style (/ › » · | ❯) and color independently — the marker inherits nothing from the item content.

why it shipped

Nested pseudo elements styling allows to style ::before::marker and ::after::marker pseudo elements and wil be essential to style ::column::scroll-marker pseudo elements for the carousel project (https://github.com/flackr/carousel/tree/main/fragmentation).

references