::before et ::after en CSS : injecter du contenu sans toucher au HTML

Deux pseudo-éléments reviennent presque partout dans les feuilles de style modernes : ::before et ::after. Ils permettent d'ajouter un fragment de rendu juste avant ou juste après le contenu réel d'un élément, sans jamais modifier le HTML.

Icônes décoratives, compteurs de liste, clearfix historique ou info-bulles entièrement en CSS : ces deux pseudo-éléments couvrent un nombre impressionnant de besoins pour un outil aussi simple en apparence.

Définition

::before insère un contenu généré juste avant le contenu réel d'un élément, à l'intérieur de sa boîte. ::after insère ce contenu juste après. Dans les deux cas, ce contenu n'existe pas dans le HTML : il est entièrement produit par CSS au moment du rendu.

La condition indispensable : content

Sans la propriété content, aucun de ces deux pseudo-éléments n'apparaît, même si toutes les autres propriétés sont correctement définies. Une valeur vide suffit à faire exister la boîte générée.

/* icône décorative avant un badge */
.badge::before {
  content: "★";
  margin-right: 4px;
  color: gold;
}

/* clearfix historique après un conteneur */
.conteneur::after {
  content: "";
  display: table;
  clear: both;
}

/* compteur automatique dans une liste */
.etapes {
  counter-reset: etape;
}
.etapes li::before {
  counter-increment: etape;
  content: "Étape " counter(etape) " : ";
  font-weight: bold;
}

Le troisième exemple montre un usage moins connu : ::before peut afficher un compteur CSS natif, incrémenté automatiquement à chaque élément de la liste, sans écrire un seul chiffre en dur dans le HTML.

Cas d'usage courants

Le clearfix, une technique plus ancienne mais toujours croisée dans du code existant, utilise ::after pour forcer un conteneur à englober des éléments en float. Les info-bulles en CSS pur combinent ::after avec l'état :hover d'un élément parent pour afficher un texte au survol, sans dépendre de JavaScript. Les icônes décoratives, elles, évitent d'ajouter une balise supplémentaire juste pour un symbole purement visuel.

Construire une info-bulle en CSS pur

Une info-bulle qui apparaît au survol illustre bien la complémentarité entre ::after et une Pseudo-classe comme :hover. Le pseudo-élément fournit le texte à afficher via content, et la pseudo-classe contrôle sa visibilité selon l'état de survol de l'élément parent, sans qu'aucune ligne de JavaScript ne soit nécessaire pour ce comportement pourtant dynamique.

.info-bulle {
  position: relative;
}
.info-bulle::after {
  content: attr(data-texte);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.info-bulle:hover::after {
  opacity: 1;
}

La fonction attr() récupère directement la valeur d'un attribut data-* du HTML, ce qui permet de réutiliser le même bloc CSS pour n'importe quel texte d'info-bulle, simplement en changeant la valeur de l'attribut sur chaque élément concerné.

Questions fréquentes

Oui, via content: url("image.png"), ou plus souvent en laissant content vide et en appliquant un background-image sur le pseudo-élément pour garder plus de contrôle sur la taille et la position. Cette seconde méthode facilite aussi l'utilisation de background-size et background-position pour ajuster précisément le rendu final selon la taille de la boîte générée.

Non, ils ne s'appliquent pas aux éléments dits remplacés, comme img ou input, car ces balises n'ont pas de contenu interne dans lequel insérer quoi que ce soit.

Oui, à condition de les échapper correctement ou d'utiliser l'autre type de guillemets pour délimiter la valeur, par exemple content: "l'exemple" avec des guillemets doubles autour d'une apostrophe simple. Dans la pratique, il est souvent plus simple de choisir systématiquement les guillemets doubles pour délimiter la valeur, quitte à échapper une apostrophe isolée avec un antislash.