Le pseudo-élément CSS ::before

Le pseudo-élément CSS ::before crée un élément généré qui est inséré comme premier enfant de l'élément ciblé, avant son contenu réel. C'est l'un des deux pseudo-éléments de « contenu généré » (son miroir est ::after), et il est le plus souvent utilisé pour ajouter des icônes décoratives, des étiquettes, des compteurs, des guillemets ou des ornements visuels sans toucher au HTML.

Cette page couvre le fonctionnement de ::before, la propriété indispensable à sa mise en œuvre, des exemples interactifs, les cas d'utilisation les plus courants et les pièges d'accessibilité à connaître.

Fonctionnement de `::before`

Un pseudo-élément ::before ne s'affiche que si vous déclarez également la propriété content — c'est cette valeur qui est insérée. Sans content, rien n'apparaît (pas même une boîte vide).

Comportements clés :

Inline par défaut. Comme un <span>, il se place en ligne avec le texte environnant jusqu'à ce que vous modifiiez son display (par exemple en inline-block ou block).
C'est une vraie boîte. Vous pouvez la styliser, l'animer, la positionner ou la faire flotter comme n'importe quel autre élément, et elle hérite des styles de l'élément auquel elle appartient.
Il vient en premier. ::before est inséré avant le contenu de l'élément ; ::after est inséré après. Les deux se trouvent à l'intérieur de l'élément, entre ses balises.
La syntaxe à un deux-points fonctionne encore. La syntaxe historique :before (un seul deux-points) est équivalente et était comprise par les très anciens navigateurs. Le double deux-points ::before est la norme moderne qui distingue les pseudo-éléments des pseudo-classes — préférez-le.

Info

::before et ::after ne fonctionnent pas sur les éléments remplacés tels que <br>, <img>, <input> ou <video>, car ces éléments n'ont pas de contenu de document autour duquel insérer du contenu généré.

Syntaxe

selector::before {
  content: "value"; /* required */
  /* other declarations */
}

La valeur de content peut être une chaîne littérale, une image (url(...)), une valeur d'attribut (attr(...)), ou un compteur (utilisé conjointement avec counter-increment). Pour une boîte purement décorative sans texte, utilisez une chaîne vide : content: "".

Exemples

Insérer une étiquette textuelle avant le contenu

Ici, ::before fait précéder chaque paragraphe d'une chaîne fixe :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "  William Shakespeare -";
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Essayez vous-même »

Le texte inséré "William Shakespeare -" apparaît directement devant la citation, alors qu'il ne figure nulle part dans le HTML.

Styliser la boîte générée

Puisque le pseudo-élément est une boîte, vous pouvez lui attribuer un arrière-plan, une bordure et une valeur display, exactement comme un élément normal :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "William Shakespeare-";
        display: inline-block;
        background-color: #ccc;
        color: #666;
        border: 2px dotted #000;
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Essayez vous-même »

Cas d'utilisation courants

::before excelle chaque fois que vous avez besoin d'une décoration qui n'appartient pas au balisage :

Icônes et puces — faites précéder un symbole (content: "★") ou une image url() des liens, éléments de liste ou boutons.
Indicateurs de champs obligatoires — ajoutez un astérisque rouge aux étiquettes : label.required::before { content: "*"; color: red; }.
Guillemets ouvrants — encadrez les citations avec des guillemets typographiques.
Compteurs — combinez avec counter-increment pour numéroter automatiquement les sections.
Récupérer des valeurs depuis les attributs — affichez l'attribut propre d'un élément avec attr() :

abbr[title]::before {
  content: attr(title) ": ";
  font-weight: bold;
}

Accessibilité et pièges à éviter

content est obligatoire. Si vous l'oubliez, le pseudo-élément n'est pas généré du tout.
Les boîtes décoratives nécessitent content: "". Pour un élément purement visuel (un séparateur, un fond d'icône), définissez une chaîne vide afin que la boîte s'affiche quand même.
Le texte généré n'est pas sélectionnable et la plupart des lecteurs d'écran l'ignorent ou le lisent de manière incohérente. Ne placez jamais dans ::before des informations que l'utilisateur doit connaître (comme des instructions critiques).
Il ne s'applique pas aux éléments remplacés (<img>, <input>, <br>, etc.).
Le point d'insertion est important. ::before est le premier enfant à l'intérieur de l'élément — pas avant la balise ouvrante de l'élément.

Note

Pour les pseudo-éléments purement décoratifs, définissez toujours content: '' afin de garantir leur rendu correct dans tous les navigateurs.

Compatibilité navigateurs

::before est pris en charge par tous les navigateurs modernes. La forme à un seul deux-points (:before) est également largement supportée et correspondait à la syntaxe utilisée avant CSS3 ; utilisez-la uniquement si vous devez prendre en charge de très anciens navigateurs.

Références associées

::after — insère du contenu après un élément.
content — la propriété qui définit ce que ::before insère.
counter-increment — construit une numérotation automatique avec du contenu généré.
position — positionne précisément un élément généré.

Pratique

Que fait le pseudo-élément '::before' en CSS ?

Il insère du contenu avant le contenu de l'élément sélectionné.Il masque le contenu avant l'élément sélectionné.Il modifie la couleur de l'élément sélectionné.Il est utilisé pour styliser l'élément sélectionné avant l'application de tout autre style.

Fonctionnement de ::before