:target-after {
/* ... */
}
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 id="toc">
<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 id="intro" class="chapter">
<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 id="ch1" class="chapter">
<h2>Chapter 1</h2>
<!-- ... -->
</section>
<section id="ch2" class="chapter">
<h2>Chapter 2</h2>
<!-- ... -->
</section>
<!-- ... -->
<nav id="toc">
<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 id="intro" class="chapter">
<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 id="ch1" class="chapter">
<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 id="ch2" class="chapter">
<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 id="ch3" class="chapter">
<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 id="ch4" class="chapter">
<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 set scroll-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 a red color 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-after) {
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 the a:target-before and a:target-after rules.