demo · v141

Target Neighbors

Scroll the carousel below or click a marker. The progress dots flip live: green for markers that precede the current scroll target (:target-before), amber for those after (:target-after).

:target-before :target-current :target-after
A
B
C
D
E
F
probing CSS.supports(":target-before")…
scroll progress: —

the CSS

.carousel { scroll-marker-group: after; }
.carousel ::scroll-marker { content: ""; width: 14px; height: 14px; border-radius: 50%; }

/* Chrome 141 ships :target-before / :target-after. */
.carousel ::scroll-marker:target-before  { background: var(--accent-emerald); }
.carousel ::scroll-marker:target-current { background: var(--text-black); }
.carousel ::scroll-marker:target-after   { background: var(--accent-amber); }

see also