Élément pseudo-CSS ::before

Définition et utilisation

CSS ::before Les pseudo-éléments sont utilisés pour insérer du contenu avant le contenu d'un élément spécifié.

Utilisation content L'attribut spécifie le contenu à insérer. La valeur de content peut être :

• Chaîne : content: "Hello world!";
• Image : content: url(myimage.jpg);
• Pas de contenu : content: none;
• Compteur : content: counter(li);
• Guillemets : content: open-quote;
• Valeur de l'attribut : content: " (" attr(href) ")";

Astuce :Veuillez noter que le contenu inséré reste à l'intérieur de l'élément spécifié. Le contenu inséré est ajouté avant d'autres contenus internes à l'élément.

Utilisation ::after Insérez du contenu après le contenu d'un élément spécifique.

Exemple

Exemple 1

Insérez une chaîne avant le contenu de chaque élément <p> :

p::before {
  content: "Lire ceci: ";
}

Essayez-le vous-même

Exemple 2

Insérez une chaîne avant le contenu de chaque élément <p> et définissez le style du contenu inséré :

p::before {
  content: "Lire ceci -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Essayez-le vous-même

Grammaire CSS

::before {
  déclarations css;
}

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cet élément pseudo.

Pages associées

Tutoriel :Élément pseudo-CSS

Référence :Élément pseudo-CSS ::after