v135 · 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 — the raw selectors

    Stylesheet showing the combinations defined for Chrome 135 — ::before::marker, ::after::marker, plus future ::column::scroll-marker.

  2. ::before::marker for declarative bullets

    The custom-list use case: each <li>::before becomes a list item with its own marker, glyph styled directly — no content: "✓" hack required.

  3. Double-nested pseudo stage

    Live colour pickers + scale slider drive ::before and ::before::first-letter rules on a counter-list. See exactly which character the chained pseudo reaches and how the cascade resolves.

  4. Placeholder Styler

    Live-configure ::placeholder::selection — color pickers for placeholder text, selection background, and selection text. Select the placeholder in the demo inputs to see the nested pseudo in action. Also shows ::placeholder::first-line.

  5. Timeline list

    A step-by-step process timeline using ::before::marker. The ::before renders a step counter, status badge, or emoji; ::before::marker suppresses the default disc so it doesn't double-render. Toggle step states and switch between three list styles live.

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