Pseudo-élément before

Le pseudo-élément before insère du texte avant un élément. Il est utilisé uniquement conjointement avec la propriété content, qui définit le texte à insérer.

Syntaxe

csssélecteur::before {
  content: 'texte';
}

Exemple

Faisons en sorte qu'au survol d'un li du texte soit inséré au début :

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:hover::before {
  content: '!!!';
}

Результат:

Exemple

Divers styles peuvent être appliqués au texte inséré. Colorons, par exemple, ce texte en rouge :

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:hover::before {
  color: red;
  content: '!!!';
}

Результат:

Voir aussi