Les pseudo-éléments CSS ::before et ::after permettent d'ajouter un contenu visuel avant ou après un élément, sans modifier le HTML. Dans ce cours, vous allez voir à quoi ils servent, comment les faire apparaître avec content, comment les styliser et dans quels cas il vaut mieux rester prudent.
Qu'est-ce qu'une pseudo-classe CSS ?
Avant de parler de ::before et ::after, il faut distinguer deux notions proches : les pseudo-classes et les pseudo-éléments.
Une pseudo-classe sert à cibler un élément dans un état particulier. Par exemple, un lien survolé avec :hover ou un champ actif avec :focus.
De leur côté, ::before et ::after ne ciblent pas un état. Ils créent un petit élément généré par le CSS, placé avant ou après le contenu d'un élément existant.
Autrement dit, on parle souvent "des pseudo-classes ::before et ::after" par habitude, mais techniquement ce sont bien des pseudo-éléments.
Si vous voulez revoir la différence entre plusieurs mécanismes de ciblage en CSS, vous pouvez aussi lire le cours Bien cibler un élément et le cours La pseudo-classe CSS :nth-child.
À quoi servent ::before et ::after ?
Ces deux pseudo-éléments servent à ajouter un morceau de contenu visuel sans toucher au HTML.
Vous pouvez par exemple afficher une icône, des guillemets décoratifs, une pastille, une flèche ou un petit texte court avant ou après un élément.
C'est pratique quand ce contenu n'a pas besoin d'exister vraiment dans le code HTML, mais seulement dans la présentation.
<p class="note">Important</p>
.note::before{
content: "→ ";
}
→ Important
Ici, la flèche est ajoutée par le CSS avant le texte.
Le HTML reste donc propre et léger. En revanche, il faut garder une règle simple en tête : si l'information ajoutée est vraiment importante pour comprendre le contenu, il vaut mieux la placer directement dans le HTML.
La propriété content est importante pour faire apparaître l'élément
C'est le point le plus important à retenir : sans la propriété content, le pseudo-élément n'apparaît pas.
Vous pouvez lui donner un texte, un caractère spécial, un emoji ou même une chaîne vide avec "".
La chaîne vide est très utilisée quand on veut créer un bloc purement décoratif, par exemple un rond de couleur ou un trait.
<span class="pastille">Nouveau</span>
.pastille::before{
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: #2ecc71;
border-radius: 50%;
margin-right: 8px;
}
Nouveau
Ici, le rond vert n'existe pas dans le HTML. Il est généré par le CSS avec une valeur vide.
Attention ! Si vous écrivez seulement .pastille::before{ background: red; }, rien ne s'affichera. Le pseudo-élément existe visuellement seulement quand content est défini.
Styliser en CSS ce nouvel élément
Une fois le pseudo-élément créé, vous pouvez le styliser presque comme un élément normal.
Vous pouvez lui appliquer par exemple :
-
une couleur avec
color, -
une taille avec
font-size,widthouheight, -
une marge avec
margin, -
un fond avec
background, -
un positionnement avec
position.
Il faut toutefois penser à son type d'affichage. Si vous voulez lui donner une largeur ou une hauteur, vous utilisez souvent display: inline-block ou display: block.
<p class="titre-deco">Chapitre 1</p>
.titre-deco::after{
content: "";
display: block;
width: 60px;
height: 4px;
background: #007890;
margin-top: 8px;
}
Chapitre 1
Le trait bleu est ajouté après le contenu du paragraphe. Ici, on ne cherche pas à ajouter du texte, mais un petit effet graphique.
Exemples d'utilisation
Les pseudo-éléments deviennent vraiment clairs quand on les voit dans des cas concrets. Voici deux usages très fréquents.
Ajouter des guillemets à une citation
Quand vous avez une citation, vous pouvez laisser le texte du HTML simple, puis ajouter les guillemets décoratifs en CSS.
<blockquote class="citation">
Le CSS permet aussi d'ajouter des détails visuels.
</blockquote>
.citation::before{
content: "« ";
color: #007890;
font-size: 2em;
}
.citation::after{
content: " »";
color: #007890;
font-size: 2em;
}
« Le CSS permet aussi d'ajouter des détails visuels. »
Les guillemets sont ajoutés par le CSS. Le texte de la citation reste plus simple dans le HTML.
Ajouter une icône après un lien
Un autre cas classique consiste à afficher une petite flèche ou un pictogramme après un lien externe.
<a class="lien-externe" href="#">
Voir la documentation
</a>
.lien-externe::after{
content: " ↗";
font-size: 0.9em;
}
Ce petit signe peut suffire à mieux guider l'utilisateur. Là encore, on ajoute un détail de présentation sans alourdir le HTML.
Liste des balises qui ne peuvent pas avoir de ::before ou ::after
Dans la pratique, ::before et ::after fonctionnent surtout sur les éléments qui peuvent contenir un vrai contenu, comme un p, un div, un span, un li ou un a.
En revanche, il vaut mieux considérer qu'ils ne s'appliquent pas correctement sur les éléments remplacés ou sur certaines balises qui n'ont pas de vrai contenu textuel.
-
Les cas classiques à éviter sont :
img,video,audio,iframe,canvas,embedetobject. -
Il faut aussi rester prudent avec plusieurs contrôles de formulaire comme
input,select,optionettextarea, car le rendu peut être absent ou incohérent selon les navigateurs. -
Les balises vides de structure comme
br,hr,metaoulinkne sont pas de bons candidats non plus.
Le réflexe simple à retenir est donc celui-ci : utilisez surtout ::before et ::after sur des éléments de contenu classiques.
Accessibilité des pseudo-éléments ::before et ::after
Les pseudo-éléments sont très utiles pour la présentation, mais ils ne doivent pas porter une information essentielle à eux seuls.
Selon les technologies d'assistance, le contenu ajouté avec content peut être ignoré, mal annoncé ou annoncé de manière imprévisible.
Autrement dit, si vous ajoutez seulement une étoile pour indiquer qu'un champ est obligatoire, ou seulement une icône pour dire qu'un lien est externe, certains utilisateurs risquent de passer à côté de cette information.
La bonne pratique consiste à réserver ::before et ::after à des éléments décoratifs ou à des détails visuels non indispensables.
- Si l'information est importante, placez-la d'abord dans le HTML.
- Utilisez les pseudo-éléments pour enrichir l'apparence, pas pour remplacer le contenu réel.
- Testez toujours votre interface si le pseudo-élément transmet malgré tout une nuance utile.
Voilà la bonne logique : le HTML porte le sens, et le CSS vient ensuite améliorer l'apparence.