À retenir
- Cible une partie spécifique d'un élément ou ajoute du contenu visuel.
- N'alourdit pas la structure HTML du site.
- S'écrit généralement avec deux doubles points (
::).
En développement web (CSS), un pseudo-élément est un mot-clé que l'on ajoute à un sélecteur pour styliser une partie précise d'un élément HTML sans avoir à modifier le code source. On peut l'imaginer comme un élément « fantôme » qui n'existe pas physiquement dans le fichier HTML mais que le navigateur crée pour nous, par exemple pour décorer le début d'un paragraphe ou ajouter une icône avant un lien.
Étymologie
Vient du préfixe grec pseudo- (« faux » ou « factice ») et du mot « élément ». En informatique, cela désigne un composant qui se comporte visuellement comme une balise (un tag HTML) sans en être un réellement dans la structure d'origine du document.
Exemples d'usage
p::first-letter: permet de créer une lettrine (une grande première lettre) au début d'un texte.a::before: permet d'insérer automatiquement un petit symbole graphique devant tous les liens d'un site.input::placeholder: sert à modifier l'apparence du texte d'indication à l'intérieur d'un champ de formulaire.
Cas d'usage
Il intervient dans la mise en page web pour ajouter des décorations (puces de listes personnalisées, rubans, ombres), styliser des fragments de texte (première ligne) ou gérer l'aspect de certains composants d'interface (barres de défilement, champs de saisie).
Bonnes pratiques
Utilisez la syntaxe moderne avec deux points doubles (::before) pour les distinguer des pseudo-classes. Pour les pseudo-éléments de contenu comme ::before et ::after, il est impératif de déclarer la propriété content (même vide) pour qu'ils s'affichent à l'écran.
Synonymes
Antonymes
Conseil
Pour débuter, utilisez-les pour garder votre code HTML « propre » : au lieu de rajouter des balises vides pour faire de la décoration, confiez cette tâche aux pseudo-éléments CSS.
Questions fréquentes
Quelle est la différence avec une pseudo-classe ?
Une pseudo-classe (:hover) cible l'état d'un élément entier, alors qu'un pseudo-élément (::first-line) cible une partie interne ou virtuelle de cet élément.
Le contenu ajouté est-il lu par les moteurs de recherche ?
Généralement non. Le texte inséré via CSS est considéré comme de la décoration et n'est pas indexé pour le contenu du site.