v141 · 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

    Select the elements immediately before and after the current :target. Great for in-page anchors that want to surface context around the link target.

  2. Scroll Marker Progress

    Carousel with scroll-marker pseudos: past steps green, active grows, future fades. Pure CSS for the spec's canonical "viewed scroll markers" use case.

  3. Reading Progress

    Long-form article with a sticky TOC that colours itself by reading position — the IntersectionObserver pattern replaced by declarative pseudo-classes.

  4. Navigation Menu

    Horizontal nav with five anchor links: the active item gets the :target-current accent; items before it show a "visited" style via :target-before; items after fade via :target-after. Sliders let you tune each state's colour and opacity so the cascade is tangible.

  5. Wizard Progress

    A 4-step registration wizard where :target-before shows completed steps as green checkmarks, :target-current highlights the active step, and :target-after dims upcoming steps — zero JavaScript state management, just CSS and anchor links.

  6. Image Gallery

    A 6-slide gallery with a thumbnail strip driven by scroll-marker-group. :target-before tints past thumbnails green, :target-current scales the active one up, and :target-after dims unvisited slides — a purely declarative progress indicator.

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