demo · v142

Reading Progress Bar

The exact use case CSSWG editors cite for these pseudo-classes: a carousel / paginated reader where the markers themselves are the progress indicator. Read segments behind you turn green via :target-before, your current step is solid black via :target-current, upcoming steps stay neutral via :target-after. No JS-driven className shuffling needed in Chrome 142+.

1. Welcome

This is a paginated reader split into six scroll-snap pages. Swipe horizontally on touch, or use the buttons below.

2. Why

Designers want a progress strip that fills in behind the reader. Before today, that meant computing the active section from scroll position in JS and toggling classes by hand.

3. The new selectors

:target-before matches scroll markers earlier in the group than the active one; :target-after matches later ones. :target-current is the active marker.

4. Pure CSS

In Chrome 142+ no JS is needed for the colour transitions — the browser drives them off the active scroll marker. JS here only paints the polyfill classes.

5. Carousels

The use case isn't just docs nav — image carousels, onboarding flows, multi-step wizards all gain a free progress bar.

6. Done

Whole strip is green except the last cell. That's the spec's own walkthrough example, rendered cheaply.

:target-before (read) :target-current (you are here) :target-after (unread)

native :target-current

—

step

—

% read

—

Whichever rendering path runs, the same CSS selectors describe the styling intent. The polyfill applies .is-before/.is-current/.is-after with matching declarations.

relevant API

.progress-bar a:target-before  { background: green; }
.progress-bar a:target-current { background: black; }
.progress-bar a:target-after   { background: #eee;  }