demo · v142

:target-before and :target-after

Scroll the panel or click a marker. The current marker matches :target-current and is black; earlier markers match :target-before (strike-through, visited); later markers match :target-after (dashed, pending). Chrome 142+ does this natively; this page applies the equivalent classes via JS so the effect is visible everywhere.

§ Introduction

Long-form content that snaps. Scroll to the next section to advance the active marker.

§ Foundations

As you cross into this section, "Introduction" becomes a :target-before and styles change.

§ Mid-flight

Two markers behind, two ahead. The active one is bold, neighbors are styled.

§ Crescendo

Almost there.

§ Outro

End of the scroller. All others are now :target-before.

native :target-current supported

—

active marker

—

Native rules also exist in the stylesheet — Chrome 142+ uses them directly, no JS needed.

relevant API

:target-before { opacity: 0.7; text-decoration: line-through; }
:target-current { background: black; color: white; }
:target-after { border-style: dashed; }