Pseudo-élémentsLes pseudo-éléments sont utilisés pour ajouter du contenu ou des styles à un sélecteur de façon uniforme.
Par exemple, un client pourrait demander d'ajouter l'emoji 🔗 à tous les liens sur son site. Bien qu'il serait possible de manuellement copier/coller l'émoji partout, ceci consommerait du temps, comporterait un risque d'erreur et si de nouveaux liens étaient ajoutés par la suite, rien ne garantirait que la personne penserait à copier ledit émoji.
Heureusement, les pseudo-éléments peuvent aider!
Les pseudo-éléments ::before et ::after permettent d'ajouter du contenu à l'intérieur d'un élément via la propriété content.
Comme leurs noms l'indiquent:
- ::before ajoute un contenu au début ⬅️
- ::after ajoute un contenu à la fin ➡️
À droite, ::after.
Remarquez comment le double deux points :: sert à séparer le sélecteur de base de son pseudo‑élément.
Anciennement, il était possible d'écrire ses pseudo-éléments avec un seul :, comme les pseudo-classes. Cependant, depuis l'arrivée de CSS3, cette pratique est désuète.
::before et ::after acceptent les mêmes propriétés CSS qu'un sélecteur normal. Il est donc courant de les voir utilisés pour jouer un rôle similaire à celui d'un tag HTML normal.
Par exemple, il est possible d'afficher une image personnalisée via la propriété background-image plutôt qu'un texte/emoji.
ERREUR FRÉQUENTE
Lorsqu’un pseudo-element (::before ou ::after) n’apparait pas, il s’agit généralement de la propriété content qui a été omise. Même si elle ne contient rien, sa présence est obligatoire pour qu’un pseudo-element affiche.Ils sont aussi souvent utilisés en combinaisons avec les pseudo-classes et les transitions afin de créer des effets de survole.
Il existe évidemment d'autres pseudo-éléments. Cependant puisque leur usage est moins répandu. Nous ne nous attarderons pas.