Pseudo-élément after

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

Syntaxe

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

Exemple

Faisons en sorte que lors du survol d'un li, le texte soit inséré à sa fin :

html<ul>
  <li>élément de liste</li>
  <li>élément de liste</li>
  <li>élément de liste</li>
  <li>élément de liste</li>
  <li>élément de liste</li>
</ul>

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

Результат:

Exemple

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

html<ul>
  <li>élément de liste</li>
  <li>élément de liste</li>
  <li>élément de liste</li>
  <li>élément de liste</li>
  <li>élément de liste</li>
</ul>

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

Результат:

Voir aussi