content en CSS : la propriété qui écrit du texte que le HTML n'a jamais eu

La propriété content est de celles qui surprennent le plus les débutants : elle ne s'applique qu'à deux pseudo-éléments précis, mais elle est capable d'ajouter du texte, un symbole, ou même la valeur d'un attribut HTML directement depuis une feuille de style, sans toucher au balisage. Elle est au cœur d'innombrables astuces d'interface : puces personnalisées, icônes décoratives, info-bulles générées, numérotation automatique.

Comprendre content, c'est aussi comprendre ses limites : ce contenu généré n'existe que visuellement, il n'apparaît jamais dans le DOM et reste invisible pour la sélection de texte ou la copie, ce qui influence directement où l'utiliser.

Définition

La propriété content définit ce qui doit être inséré à l'intérieur d'un pseudo-élément, le plus souvent ::before et ::after. Sans elle, ces Pseudo-élément n'existent tout simplement pas dans le rendu : content est la propriété qui leur donne un contenu, même vide, et qui les fait exister visuellement.

Syntaxe et valeurs possibles

content accepte plusieurs types de valeurs : une chaîne de texte entre guillemets, la fonction attr() pour lire un attribut HTML, une image, ou des mots-clés spéciaux comme none ou normal.

.requis::after {
  content: " *";
  color: red;
}

.lien-externe::after {
  content: " ↗";
}

.bouton::before {
  content: attr(data-label);
}

Même une chaîne vide, content: "";, suffit à faire exister le pseudo-élément dans le rendu : c'est d'ailleurs la valeur la plus courante quand on utilise ::before ou ::after uniquement pour dessiner une forme avec une bordure ou une couleur de fond, sans texte.

attr() : récupérer la valeur d'un attribut HTML

La fonction attr() permet de lire la valeur d'un attribut HTML existant sur l'élément et de l'insérer comme texte. C'est la façon la plus directe de garder une donnée dans le HTML, là où elle a du sens sur le plan sémantique, tout en l'affichant uniquement via le CSS.

a[title]::after {
  content: " (" attr(title) ")";
  font-size: 0.85em;
  color: gray;
}

Cette technique se rapproche de l'esprit d'un Sélecteur d'attribut, qui cible un élément selon la présence ou la valeur d'un attribut : attr() va un cran plus loin en réutilisant cette valeur comme contenu visible, sans dupliquer l'information à deux endroits différents.

Les compteurs CSS

content sait aussi afficher la valeur d'un compteur CSS, un système de numérotation automatique géré entièrement en CSS, sans script. On l'initialise et on l'incrémente avec counter-reset et counter-increment, puis on l'affiche avec la fonction counter() à l'intérieur de content.

.sommaire {
  counter-reset: section;
}

.sommaire h3 {
  counter-increment: section;
}

.sommaire h3::before {
  content: "Section " counter(section) " : ";
}

Ce mécanisme fonctionne même avec des listes imbriquées, en combinant plusieurs compteurs, ce qui permet de reproduire une numérotation à plusieurs niveaux, comme 1, 1.1, 1.2, purement en CSS, un cas d'usage fréquent pour une documentation ou un sommaire.

Piège classique : contenu invisible pour la sélection et l'accessibilité

Le texte généré par content n'existe pas dans le DOM. Il ne peut donc pas être sélectionné, copié, ni recherché avec Ctrl+F, et la plupart des lecteurs d'écran ne l'annoncent pas par défaut. Utiliser content pour afficher une information réellement utile, comme un prix ou un message d'erreur, revient à la rendre invisible pour une partie des utilisateurs.

FAQ

Non, la propriété n'a d'effet que sur les pseudo-éléments ::before et ::after. Appliquée directement sur un élément HTML normal comme un div ou un paragraphe, elle est tout simplement ignorée par le navigateur.

La plupart des moteurs de recherche modernes exécutent le CSS et peuvent techniquement voir ce texte, mais son traitement reste incertain et variable : mieux vaut ne jamais compter dessus pour du contenu qui doit être indexé de façon fiable.

Non, content n'insère que du texte brut ou une image, jamais de balisage HTML interprété : les caractères comme < ou > seraient affichés tels quels, comme du texte, et non comme des éléments.