Docs CSS exécutables : ::before et ::after

Q: Pourquoi mon ::before ou ::after ne s'affiche-t-il pas ?

La cause la plus fréquente est une propriété content manquante : sans elle, le pseudo-élément n'est pas généré. Utilisez content: "" pour une boîte décorative vide. Autres causes : un pseudo-élément inline avec une largeur et une hauteur (donnez-lui display: block ou inline-block), ou un élément comme ou qui ne peut pas en contenir.

Q: Quelle est la différence entre :before et ::before ?

Aucune en termes de comportement. ::before avec deux fois deux-points est la syntaxe actuelle qui distingue les pseudo-éléments ; :before avec un seul deux-points est l'ancienne écriture de CSS2, que les navigateurs acceptent encore pour before, after, first-line et first-letter.

Q: Les lecteurs d'écran lisent-ils le contenu de ::before ?

En général oui : le texte de content fait le plus souvent partie du nom accessible, mais il ne peut pas être sélectionné ni copié. Gardez les vraies informations dans le HTML et utilisez les pseudo-éléments pour la décoration et les petits repères visuels.

Ce que font ::before et ::after

::before insère une boîte comme premier enfant d'un élément et ::after comme dernier enfant. Le contenu de la boîte est défini par la propriété content. Rien n'est ajouté au HTML : le navigateur la génère à partir du CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

Le HTML ne contient que 9 et Tests pass. Le signe dollar, l'étiquette « / month » et la coche viennent tous du CSS. Ils héritent des styles de l'élément (police, couleur) sauf si vous les surchargez, comme le font les exemples ci-dessus.

Syntaxe

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

Valeur de `content`	Résultat
`"text"`	Une chaîne. Utilisez `"\A"` pour un retour à la ligne (avec `white-space: pre`), `"\2192"` pour un caractère Unicode (→)
`""`	Une boîte vide, pour les formes et les décorations
`attr(data-label)`	La valeur d'un attribut de l'élément
`counter(step)`	La valeur d'un compteur CSS
`open-quote` / `close-quote`	Les guillemets adaptés à la langue de l'élément
`none` ou `normal`	Pas de pseudo-élément (`normal` est la valeur par défaut)

content est obligatoire. Sans lui, ::before et ::after ne sont jamais créés, quel que soit le nombre d'autres propriétés que vous leur donnez.

Formes décoratives avec content: ""

Avec content: "", le pseudo-élément est une boîte vide que vous pouvez dimensionner et colorer. Il est inline par défaut, et une boîte inline ignore width et height : donnez-lui display: block, inline-block ou position: absolute :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

Positionner un pseudo-élément

Pour une décoration placée par-dessus ou autour de l'élément, utilisez position: absolute sur le pseudo-élément et position: relative sur l'élément lui-même, afin que les décalages soient mesurés depuis l'élément :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

Attention à l'ordre quand vous combinez avec une pseudo-classe : l'état vient d'abord, puis le pseudo-élément, .link:hover::after, jamais .link::after:hover.

Lire des attributs avec attr() : une infobulle

attr() place la valeur d'un attribut dans content, si bien qu'une seule règle peut afficher un texte différent sur chaque élément :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

Une infobulle qui n'apparaît qu'au survol est invisible pour les utilisateurs du clavier et des écrans tactiles. Pour tout ce qui est important, mettez le texte dans la page, ou affichez-le aussi sur :focus avec tabindex="0" sur l'élément.

Numéroter avec des compteurs

Les compteurs CSS et ::before numérotent des éléments sans taper les numéros :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

Ajoutez ou supprimez une étape et les numéros se mettent à jour tout seuls.

Où ::before et ::after ne fonctionnent pas

Les pseudo-éléments sont insérés à l'intérieur de l'élément, entre ses balises. Les éléments qui n'ont pas d'intérieur pour eux ne peuvent pas les afficher :

<img>, <video>, <iframe> (éléments remplacés)
<input>, <select>, <textarea> (contrôles de formulaire), et <br>

Certains navigateurs les dessinent sur une case à cocher ou une image cassée, mais ce n'est pas constant. Placez plutôt le pseudo-élément sur un conteneur : <span class="field"><input></span> et stylisez .field::after.

Erreurs courantes

Pas de content. La raison la plus fréquente pour laquelle rien ne s'affiche. Ajoutez content: "".
Dimensionner un pseudo-élément inline. width et height n'ont aucun effet tant que vous n'avez pas défini display: block, inline-block ou position: absolute.
Mauvais ordre avec un état. a:hover::after fonctionne ; a::after:hover non.
Une position absolue sans parent positionné. Le pseudo-élément s'aligne alors sur un ancêtre lointain. Ajoutez position: relative à l'élément.
Mettre du vrai contenu dans le CSS. Le texte de content ne peut pas être sélectionné ni copié. Gardez l'information dans le HTML.

Questions fréquentes

À quoi sert ::before en CSS ?

Il crée un pseudo-élément qui devient le premier enfant de l'élément sélectionné, rempli avec ce qu'indique la propriété content. ::after fait la même chose comme dernier enfant. Aucun des deux n'existe dans le HTML, ce qui les rend pratiques pour les icônes, les étiquettes et les décorations.

Pourquoi mon ::before ou ::after ne s'affiche-t-il pas ?

La cause la plus fréquente est une propriété content manquante : sans elle, le pseudo-élément n'est pas généré. Utilisez content: "" pour une boîte décorative vide. Autres causes : un pseudo-élément inline avec une largeur et une hauteur (donnez-lui display: block ou inline-block), ou un élément comme <img> ou <input> qui ne peut pas en contenir.

Quelle est la différence entre :before et ::before ?

Aucune en termes de comportement. ::before avec deux fois deux-points est la syntaxe actuelle qui distingue les pseudo-éléments ; :before avec un seul deux-points est l'ancienne écriture de CSS2, que les navigateurs acceptent encore pour before, after, first-line et first-letter.

Peut-on utiliser ::before sur un img ou un input ?

Pas de façon fiable. Les pseudo-éléments sont insérés dans le contenu de l'élément, et les éléments remplacés comme <img> ou les contrôles de formulaire comme <input> n'ont pas de boîte de contenu pour eux. Entourez l'élément d'un <span> ou d'un <div> et placez le pseudo-élément sur ce conteneur.

Les lecteurs d'écran lisent-ils le contenu de ::before ?

En général oui : le texte de content fait le plus souvent partie du nom accessible, mais il ne peut pas être sélectionné ni copié. Gardez les vraies informations dans le HTML et utilisez les pseudo-éléments pour la décoration et les petits repères visuels.

Concepts liés