demo · v141

Scroll Marker Progress

A carousel using the scroll-marker pseudo-element. :target-before styles every marker for slides already scrolled past (green), :target highlights the active one (black, bigger), :target-after dims everything still to come. Onboarding flows, photo galleries, slide decks — anywhere users need "you are here / how much further" feedback.

checking support…

step 1 — welcome

Click a button below or scroll horizontally to navigate.

step 2 — set up your workspace

Markers for past steps go green; the active one grows; future steps fade.

step 3 — invite teammates

All three pseudo-classes from one stylesheet — no JS for visual state.

step 4 — finish

The carousel is functional even without the pseudo-class support — markers just stay neutral.

the styles

.carousel { scroll-marker-group: after; }
.slide::scroll-marker {
  content: ""; display: inline-block;
  width: 14px; height: 14px; border-radius: 50%;
  background: lightgray; border: 2px solid #000;
}
.slide:target::scroll-marker {        /* active */
  background: black; transform: scale(1.4);
}
.slide:target-before::scroll-marker { /* viewed */
  background: green; border-color: green;
}
.slide:target-after::scroll-marker {  /* ahead */
  opacity: 0.4;
}

why this angle

The spec quote — "highlight the progress of the scroller by styling the already viewed scroll markers" — is the canonical use case. Without the new pseudo-classes you'd need JavaScript to walk the DOM, compare positions against the URL hash, and apply classes. The pseudo-classes let the styling stay in CSS, declarative and predictable.