Propriété content

La propriété content permet d'insérer dans les balises du texte généré arbitraire. Elle est utilisée conjointement avec les pseudo-éléments after et before.

Syntaxe

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

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

Exemple

Insérons du texte supplémentaire au début et à la fin du texte de la balise li :

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

cssli::before {
  content: '!!!';
}
li::after {
  content: '???';
}

Результат:

Exemple

Divers styles peuvent être appliqués au texte inséré. Colorons, par exemple, ce texte avec une certaine couleur :

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

cssli::before {
  color: red;
  content: '!!!';
}
li::after {
  color: green;
  content: '???';
}

Результат:

Voir aussi