Partagez cet article :

Personnaliser la pseudo-classe CSS `:visited`

Dernière mise à jour : mai 2022

Introduction

Imaginons que vous mettiez en place sur votre blog une série de liens hypertexte, chacun menant à un article sur une nouvelle page.

Vous souhaitez montrer à vos visiteurs, pour plus de clarté, les articles sur lesquels ils n'ont pas cliqués.

Voici donc une petite technique en CSS pour personnaliser la pseudo-classe :visited.

Mise en place en CSS

Avantages :
✔️ Facile à mettre en place.
✔️ Effet de dynamisme
✔️ Peu de code CSS
✔️ Pas de JS

Inconvénients :
❌ C'est un hack CSS
❌ Ne fonctionne pas en mode navigation privée
❌ Ne fonctionne pas si l'historique n'est pas conservé
❌ Il faut jouer avec la couleur du background pour cacher l'état de l'article (Article non lu)

Cliquez sur les liens ci-dessous, puis revenez à cette page, "(Article non lu)" devrait disparaître.



<a href="votre-lien.html">
<span aria-hidden="true" class=votre_class>
Titre
</span>
</a>

Petite explication sur l'attribut HTML aria-hidden. Certains lecteurs d'écran étant capables de restituer vocalement les pseudo-classes, nous allons faire en sorte que celle-ci ne soit pas lue, pour éviter d'entendre "Article non lu" à chaque fois.



.votre_class:after{

content: '(Article non lu)';
font-size: 1.25rem;
vertical-align: middle;
display: inline-block;
color: #2ecb6f;
margin-left: .5rem}

a:visited .votre_class:after{

color: #fff /*la couleur doit correspondre au background de votre contenu*/

}

Mise en place avec JavaScript

Une autre méthode consiste à montrer à vos visiteurs les liens qu'ils ont déjà visités. Nous allons pour ce faire utiliser le couplet HTML5/JS.

Voir la méthode

Source, inspiration, ressources :

Source originale ^(EN) méthode CSS.

Plus d'infos sur Aria ^(FR) .

En savoir plus sur les pseudo-classes CSS.

Vous rencontrez un problème avec ce tutoriel ?