Pseudo-éléments

2

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

Voir le CodePen de Simon Arnold (@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.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Psssst! Tous les émojis affichés au début des boites de texte comme celle-ci sont ajoutés via le pseudo-élément ::before

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme