Toutes les portions de contenu qui apparaissent à l'écran n'existent pas forcément dans le HTML. Le pseudo-élément est l'outil qui permet à CSS de créer ces fragments de rendu directement depuis la feuille de style.
C'est une famille de sélecteurs distincte des pseudo-classes, bien qu'on les confonde souvent au début, à cause d'une syntaxe qui se ressemble à un deux-points près.
Définition
Un pseudo-élément est un mot-clé ajouté à un sélecteur, précédé de deux deux-points, qui cible une portion précise du rendu d'un élément, comme sa première ligne, son premier caractère, ou un contenu généré qui n'a pas d'existence dans le document HTML.
Les pseudo-éléments les plus courants
/* contenu injecté avant l'élément */
.badge::before {
content: "★";
margin-right: 4px;
}
/* contenu injecté après l'élément */
.lien-externe::after {
content: " ↗";
}
/* première ligne d'un bloc de texte */
p::first-line {
font-weight: bold;
}
/* texte affiché dans un champ vide */
input::placeholder {
color: #999;
}Les pseudo-éléments ::before et ::after sont sans doute les plus utilisés : ils permettent d'injecter un contenu visuel, comme une icône ou une flèche, sans ajouter le moindre élément au HTML. D'autres pseudo-éléments ciblent des fragments plus subtils, comme ::first-letter pour la première lettre d'un paragraphe ou ::selection pour le texte sélectionné par l'utilisateur.
Double deux-points contre simple deux-points
La syntaxe moderne réserve le double deux-points aux pseudo-éléments et le simple deux-points aux Pseudo-classe, ce qui permet de distinguer immédiatement les deux familles en lisant un sélecteur. Certains anciens pseudo-éléments comme ::before acceptent encore l'écriture avec un seul deux-points pour rester compatibles avec du très vieux CSS, mais la double syntaxe reste la convention recommandée aujourd'hui.
| Aspect | Pseudo-classe | Pseudo-élément |
|---|---|---|
| Syntaxe | Un deux-points | Deux deux-points |
| Ce qu'il cible | Un état ou une position | Une portion de rendu |
| Existe dans le HTML | Oui, déjà présent | Non, généré par CSS |
Cas d'usage concrets
Les pseudo-éléments servent à ajouter des icônes décoratives sans balise supplémentaire, à construire des compteurs automatiques dans une liste, à réaliser un clearfix pour maîtriser les éléments flottants, ou encore à créer des info-bulles entièrement en CSS grâce au contenu injecté par content associé à l'affichage conditionnel au survol.
::before ou ::after n'apparaît que si la propriété content est définie, même avec une valeur vide comme content: "". Oublier cette propriété est la cause numéro un d'un pseudo-élément invisible.Deux pseudo-éléments moins connus
Au-delà de ::before, ::after, ::first-line et ::placeholder, deux autres pseudo-éléments méritent d'être connus. ::first-letter cible uniquement la première lettre d'un bloc de texte, un classique pour reproduire une lettrine typographique en début de paragraphe. ::selection cible le texte que l'utilisateur sélectionne avec la souris, ce qui permet par exemple de remplacer la couleur de surbrillance par défaut du navigateur par une teinte qui correspond à l'identité visuelle du site.
/* lettrine sur le premier paragraphe d'un article */
article p:first-of-type::first-letter {
font-size: 2.5em;
float: left;
line-height: 0.8;
}
/* couleur de sélection personnalisée */
::selection {
background-color: #ffe66d;
}Questions fréquentes
::before n'apparaît-il pas à l'écran ?La cause la plus fréquente est l'absence de la propriété content. Sans elle, le navigateur ne génère aucune boîte à afficher, même si toutes les autres propriétés sont correctement définies. C'est l'erreur numéro un chez les débutants, souvent après avoir copié un extrait de code incomplet trouvé en ligne.
Pas directement : le contenu d'un pseudo-élément est fixé dans la feuille de style. Il est toutefois possible de le faire varier via une variable CSS mise à jour par JavaScript. Cette indirection reste la seule porte d'entrée propre entre un script et un pseudo-élément, puisque ce dernier n'existe jamais directement dans le DOM manipulable.
Non, un pseudo-élément n'existe pas dans le DOM et ne peut donc pas être sélectionné par des méthodes comme querySelector. Seul son style peut être modifié, indirectement, via des classes ou variables CSS.