Pseudo-élément ::before CSS

Le pseudo-élément ::before est un élément de contenu généré qui insère tout type de contenu avant le contenu d'un élément. Il peut être utilisé pour insérer des caractères, des chaînes de texte et des images. La valeur est définie par la propriété content.

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

Ce pseudo-élément peut être animé, positionné ou flotté comme n'importe quel autre contenu.

Le pseudo-élément ::before peut également être utilisé avec la notation à deux-points unique :before, qui est prise en charge par tous les navigateurs.

Le ::after pseudo-élément ajoute du contenu après tout autre contenu, tandis que le pseudo-élément ::before ajoute du contenu avant tout autre contenu en HTML.

INFO

Les pseudo-éléments créés avec ::after et ::before ne s'appliquent pas aux éléments remplacés (par ex., <br>, <img>).

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

Syntaxe

Pseudo-élément ::before CSS

css

::before {
  css declarations;
}

Exemple du pseudo-élément ::before :

Être ou ne pas être|Exemple du pseudo-élément ::before CSS|W3Docs

html

<!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>

Try it Yourself »

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

Exemple du pseudo-élément ::before avec du contenu stylisé :

William SHakespeare|Exemple du pseudo-élément ::before CSS|W3Docs

html

<!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>

Try it Yourself »

note
Pour les pseudo-éléments purement décoratifs, définissez toujours content: '' pour garantir un rendu correct sur tous les navigateurs.

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 change la couleur de l'élément sélectionné.Il est utilisé pour styliser l'élément sélectionné avant que tout autre style ne soit appliqué.

Pseudo-élément ::before CSS ​

Version ​

Syntaxe ​

Exemple du pseudo-élément ::before : ​