Pseudo-éléments

Les 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!

Before & After

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 ➡️
À gauche, ::before.
À 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.

::before ::before ::after ::after Autres pseudo-éléments

Il existe évidemment d'autres pseudo-éléments. Cependant puisque leur usage est moins répandu. Nous ne nous attarderons pas.

Article MDN à propos des pseudo-elements. Tous les icônes/émojis dans les boites de texte de ce site, comme la tête de dragon de MDN dans le bloc précédent, sont ajoutés avec des ::before. Résumé vidéo
EXERCICE Pseudo-éléments - Zab Café Pour cet exercice, vous devez compléter une page de blog du torréfacteur montréalais Zab Café ☕️ en la bonifiant avec des styles de liens riches.