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 ➡️

CodePen | smnarnold 👀

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.

Ils sont aussi souvent utilisés en combinaisons avec les pseudo-classes et les transitions afin de créer des effets de survole.

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.

En savoir plus Article MDN à propos des pseudo-elements.