Pseudo-élément

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.