# Pseudo-élément

> Un pseudo-élément désigne, avec la syntaxe à deux deux-points comme ::before, une partie précise d'un élément ou un contenu généré qui n'existe pas dans le HTML source.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/pseudo-element/

Ajouter une puce décorative, une citation entre guillemets stylisés ou surligner la première lettre d'un paragraphe sans toucher au HTML : c'est exactement ce que permettent les pseudo-éléments. Notés avec deux deux-points (`::before`, `::after`, `::first-line`, `::placeholder`), ils ciblent une portion virtuelle d'un élément et peuvent, pour `::before` et `::after`, injecter du contenu via la propriété `content`.

## Usage dans WordPress

Beaucoup de thèmes utilisent `::before` et `::after` pour des séparateurs visuels entre articles, des icônes en CSS pur sur les liens de navigation, ou des effets décoratifs sur le bloc Citation. Ces pseudo-éléments n'apparaissent jamais dans le contenu retourné par l'éditeur de blocs ni dans le flux RSS : ils sont purement visuels et vivent dans la feuille de style du thème, pas dans les données du bloc.

## Exemple

```
.wp-block-quote::before {
  content: "\201C";
  font-size: 3rem;
  color: #94a3b8;
}
```

## Bon à savoir

- Le contenu généré par `content` n'est pas lu de façon fiable par tous les lecteurs d'écran : ne jamais y placer une information indispensable à la compréhension.
- Un élément ne peut avoir qu'un seul `::before` et un seul `::after`, mais chacun peut lui-même être stylé (couleur, position, taille) comme une boîte à part entière, avec sa propre valeur de `display`.
- À ne pas confondre avec une pseudo-classe (un seul deux-points, comme `:hover`) qui sélectionne un état existant plutôt que de générer un contenu.
- `::first-letter` et `::first-line` ciblent, eux, une portion réelle du texte déjà présent plutôt que d'en ajouter un nouveau, ce qui les rend utiles pour une lettrine en début d'article sans toucher au balisage du bloc Paragraphe.
- Par défaut, un pseudo-élément généré par `content` n'a pas de sens sémantique propre : il vaut mieux réserver `::before` et `::after` à des décorations purement visuelles et non à des informations structurantes du contenu.