v142 · css

:target-before and :target-after pseudo-classes

These pseudo-classes match scroll markers that are, respectively, before or after the active marker (the one matching :target-current) within the same scroll marker group, as determined by flat tree order: * :target-before matches all scroll markers that precede the active marker in the flat tree order within the group. * :target-after matches all scro

concepts

  1. Target Neighbors

    Scroll a snapping container — markers before the active section get styled as visited, markers after as pending, exactly as :target-before / :target-after intend.

  2. Reading Progress

    A horizontal carousel where the scroll-marker strip is the progress bar — read segments turn green via :target-before, unread stay neutral via :target-after. No JS class-toggling needed in Chrome 142+.

  3. Onboarding Stepper

    A six-step product onboarding flow rendered with scroll-marker-group and styled three ways using :target-before (done), :target-current (active), :target-after (pending). Snap to any step from the markers or use the back/next buttons; live progress percentage updates from the scroll offset.

  4. Wizard Progress

    A multi-step installation wizard where the step-indicator uses :target-before, :target-current, and :target-after to style completed, active, and upcoming steps in pure CSS. Click any step marker or use Next/Back — no JS class toggling required. A feature-detect banner switches to a JS-polyfill mode in unsupported browsers.

why it shipped

Being able to select scroll markers before/after the target one allows to e.g. highlight the progress of the scroller by styling the already viewed scroll markers.

references