:target-after {
/* ... */
}
In diesem Beispiel verwenden wir die :target-before und :target-after Pseudoklassen, um die Scrollmarkierungen vor und nach der aktiven zu markieren und so die Elemente anzuzeigen, die der Benutzer bereits gesehen hat, und diejenigen, die noch kommen.
HTML
Das Markup enthält ein Inhaltsverzeichnis, das mit einer geordneten Liste (<ol>/<li>) und <a> Elementen erstellt wurde. Darauf folgt eine Reihe von <section> Elementen, die Inhalte enthalten.
<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
Wir haben scroll-target-group: auto auf das <ol> gesetzt, um es in einen Scrollmarkierungsgruppenkontainer zu verwandeln, und lassen den Browser bestimmen, welches <a> Element die aktive Scrollmarkierung zu einem bestimmten Zeitpunkt ist (also, welches Ziel des Links derzeit sichtbar ist). Wir stylen dann die :target-current Pseudoklasse mit einer roten color, damit sie deutlich hervorsticht.
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;
}
Schließlich verwenden wir die :target-before Pseudoklasse, um alle <a> Elemente vor der aktiven Scrollmarkierung mit einer grauen Farbe und Durchstreichung zu stylen, um sie als abgeschlossen/fertig aussehen zu lassen, und wir verwenden die :target-after Pseudoklasse, um alle <a> Elemente nach der aktiven Scrollmarkierung mit einer hellen Unterstreichung zu stylen.
a:target-before {
color: gray;
text-decoration: line-through;
}
a:target-after {
text-decoration: underline orange 2px;
}
Ergebnis
Versuchen Sie, entweder durch Klicken auf die Links oder durch Scrollen zu navigieren. In beiden Fällen werden Sie sehen, dass die rote Textfarbe zwischen den Links wechselt, um der Sektion zu entsprechen, die gerade im Blick ist. Die Links vor und nach dem aktuellen roten Link werden auch aktualisiert, um die in den a:target-before und a:target-after Regeln definierten Stile zu verwenden.