:target-after
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La pseudo-classe CSS :target-after sélectionne les marqueurs de défilement qui viennent après le marqueur de défilement actif (celui qui correspond actuellement à :target-current) dans un groupe de marqueurs de défilement. Vous pouvez utiliser ce sélecteur pour styliser les éléments de navigation qui viennent après la position de navigation actuelle dans un groupe de marqueurs de défilement.
Note :
La pseudo-classe :target-after n'est valide que sur les pseudo-éléments ::scroll-marker et les éléments qui ont été désignés comme marqueurs de défilement via la propriété scroll-target-group.
Syntaxe
:target-after {
/* ... */
}
Exemples
Mettre en forme les éléments de navigation avant et après le marqueur de défilement actif
Dans cet exemple, nous utilisons les pseudo-classes :target-before et :target-after pour mettre en évidence les marqueurs de défilement avant et après celui actif, indiquant les éléments que l'utilisateur·ice a déjà consultés et ceux qui restent à venir.
HTML
Le balisage contient un tableau de contenu créé en utilisant une liste ordonnée (<ol>/<li>) et des éléments HTML <a>. Cela est suivi par une série d'éléments HTML <section> contenant du contenu.
<nav id="toc">
<ol>
<li><a href="#intro">Introduction</a></li>
<li><a href="#ch1">Chapitre 1</a></li>
<li><a href="#ch2">Chapitre 2</a></li>
<li><a href="#ch3">Chapitre 3</a></li>
<li><a href="#ch4">Chapitre 4</a></li>
</ol>
</nav>
<section id="intro" class="chapter">
<h1>Prose du siècle</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>Chapitre 1</h2>
<!-- ... -->
</section>
<section id="ch2" class="chapter">
<h2>Chapitre 2</h2>
<!-- ... -->
</section>
<!-- ... -->
CSS
Nous avons défini scroll-target-group: auto sur le <ol> pour le transformer en conteneur de groupe de marqueurs de défilement et laisser le navigateur déterminer quel élément <a> est le marqueur de défilement actif à un moment donné (c'est-à-dire quelle cible de lien est actuellement visible). Nous stylons ensuite la pseudo-classe :target-current avec une color red afin qu'elle se démarque clairement.
ol {
scroll-target-group: auto;
}
:target-current {
color: red;
}
Enfin, nous utilisons la pseudo-classe :target-before pour mettre en forme tous les éléments <a> avant le marqueur de défilement actif avec une couleur grise et un texte barré, afin de les faire apparaître comme complétés/terminés, et nous utilisons la pseudo-classe :target-after pour mettre en forme tous les éléments <a> après le marqueur de défilement actif avec un soulignement lumineux.
a:target-before {
color: gray;
text-decoration: line-through;
}
a:target-after {
text-decoration: underline orange 2px;
}
Résultat
Essayez de naviguer soit en cliquant sur les liens, soit en faisant défiler la page. Dans les deux cas, vous verrez que la couleur du texte rouge se déplace entre les liens pour correspondre à la section actuellement visible. Les liens avant et après le lien rouge actuel se mettent également à jour pour utiliser les styles définis dans les règles a:target-before et a:target-after.
Spécifications
| Specification |
|---|
| CSS Overflow Module Level 5 # selectordef-target-after |
Compatibilité des navigateurs
Voir aussi
- La propriété
scroll-marker-group - La propriété
scroll-target-group - Les pseudo-classes
:target-current,:target-before - Le pseudo-élément
::scroll-marker - Le pseudo-élément
::scroll-marker-group - Créer des carrousels CSS
- Le module de débordement CSS
- Galerie de carrousels CSS (angl.) sur chrome.dev (2025)