:target-before
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
The:target-beforeCSSpseudo-class selects scroll markers that comebefore the active scroll marker (the one that currently matches:target-current) within a scroll marker group. You can use this selector to style navigation items that come before the current navigation position within a scroll marker group.
Note:The:target-before pseudo-class is only valid on::scroll-marker pseudo-elements and elements that have been designated as scroll markers via thescroll-target-group property.
Syntax
:target-before { /* ... */}Examples
Styling navigation items before and after the active scroll marker
In this example, we use the:target-before and:target-after pseudo-classes to highlight the scroll markers before and after the active one, indicating items the user has already viewed and those that are still to come.
HTML
The markup contains a table of contents created using an ordered list (<ol>/<li>) and<a> elements. This is followed by a series of<section> elements containing content.
<nav> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#ch1">Chapter 1</a></li> <li><a href="#ch2">Chapter 2</a></li> <li><a href="#ch3">Chapter 3</a></li> <li><a href="#ch4">Chapter 4</a></li> </ol></nav><section> <h1>Prose of the century</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p></section><section> <h2>Chapter 1</h2> <!-- ... --></section><section> <h2>Chapter 2</h2> <!-- ... --></section><!-- ... --><nav> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#ch1">Chapter 1</a></li> <li><a href="#ch2">Chapter 2</a></li> <li><a href="#ch3">Chapter 3</a></li> <li><a href="#ch4">Chapter 4</a></li> </ol></nav><section> <h1>My story</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p></section><section> <h2>Chapter 1</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> <p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p></section><section> <h2>Chapter 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> <p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p></section><section> <h2>Chapter 3</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> <p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p></section><section> <h2>Chapter 4</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> <p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p></section>CSS
We've setscroll-target-group: auto on the<ol> to turn it into a scroll marker group container and let the browser determine which<a> element is the active scroll marker at any given time (that is, which link's target is currently in view). We then style the:target-current pseudo-class with aredcolor so that it stands out clearly.
body { font: 1.2em / 1.5 system-ui; width: 50%; max-width: 700px; margin: 0 auto;}nav { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: center;}section { padding-top: 60px;}a { color: black; text-decoration: none;}a:hover,a:focus { text-decoration: underline;}ol { display: flex; width: 100%; justify-content: space-around; list-style-type: none; padding: 20px 0; margin: 0; background: white;}@supports not selector(:target-before) { body::before { content: "Your browser does not support the :target-before and :target-after pseudo-classes."; color: black; background-color: #ffcd33; text-align: center; padding: 1rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; }}ol { scroll-target-group: auto;}:target-current { color: red;}Finally, we use the:target-before pseudo-class to style all<a> elements before the active scroll marker with a gray color and strike-through, to make them look completed/finished, and we use the:target-after pseudo-class to style all<a> elements after the active scroll marker with a bright underline.
a:target-before { color: gray; text-decoration: line-through;}a:target-after { text-decoration: underline orange 2px;}Result
Try navigating either by clicking the links or by scrolling. In both cases, you'll see that the red text color moves between the links to match the section currently in view. The links before and after the current red link also update to use the styles defined in thea:target-before anda:target-after rules.
Specifications
| Specification |
|---|
| CSS Overflow Module Level 5 # selectordef-target-before |