Un pseudo-élément (double deux-points ::) style une partie spécifique d'un élément, ou génère du contenu qui n'est pas en HTML — sans ajouter de balises supplémentaires.
::before et ::after — contenu généré
.note::before {
content: "💡 "; /* REQUIRED — even if empty: content: "" */
}
.external-link::after {
content: " ↗"; /* add an icon after external links */
}
La propriété content est obligatoire — sans elle, le pseudo-élément ne s'affiche pas. Le contenu généré est un enfant au tout début (::before) ou à la fin (::after) de l'élément.
Formes décoratives sans div supplémentaires
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
C'est l'utilisation classique : dessiner des flèches, des badges, des superpositions, des lignes décoratives — en gardant le HTML exempt d'éléments purement visuels.
Autres pseudo-éléments (style d'une partie d'un élément)
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
Un ou deux deux-points
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 a introduit :: pour distinguer les pseudo-éléments des pseudo-classes (les navigateurs acceptent toujours les deux-points simples sur les anciens pour la compatibilité, mais utilisent ::)
Note d'accessibilité
Le contenu généré est lu par certains lecteurs d'écran — ne mettez pas d'informations essentielles uniquement en ::before/::after (utilisez-le pour la décoration), et les icônes décoratives sont mieux laissées en dehors de l'arborescence d'accessibilité.
Pourquoi c'est important
Les pseudo-éléments vous permettent d'ajouter des icônes, des formes décoratives (flèches, séparateurs), des lettrines et des compteurs purement en CSS — aucun <div> ou <span> supplémentaire.
Ils gardent le balisage sémantique tout en permettant des détails visuels riches, et ils sont un incontournable du style propre et maintenable.