Que sont les pseudo-éléments comme ::before et ::after ?

Question

IT Interview Practice · Accepted Answer

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é ```css .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 ```css .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) ```css 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 ```css .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 `

` ou `` 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.

::before et ::after — contenu généré

Formes décoratives sans div supplémentaires

Autres pseudo-éléments (style d'une partie d'un élément)

Un ou deux deux-points

Note d'accessibilité

Pourquoi c'est important

Questions connexes