Pseudo Élément CSS ::before

Le pseudo-élément ::before est un élément de contenu généré qui ajoute n'importe quel élément avant le contenu.

Cette valeur est définie par la propriété content.

Par défaut, le pseudo-élément ::before est en ligne (inline).

Le pseudo-élément ::before peut être utilisé pour insérer n'importe quel contenu, y compris des caractères, chaînes de texte et des images.

Le pseudo-élément ::before peut être animé, positionné ou flotté comme quelque d'autre contenu.

Le pseudo-élément ::before peut également être utilisé avec une notation ::before qui est supportée par tous les navigateurs.

Version

CSS2

Syntaxe

::before {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p::before { 
      content: "  William Shakespeare -";
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur ::before</h2>
    <p>"Être ou ne pas être".</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant, l'utilisateur peut ajouter des styles au contenu:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p::before { 
      content: "William Shakespeare-";
      background-color: #ccc;
      color: #666;
      border: 2px dotted #000;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur ::before</h2>
    <p>"Être ou ne pas être".</p>
  </body>
</html>