Le CSS nous permet d'ajouter un ou plusieurs caractères avant ou après un élément HTML. Ceci sera réalisé avec la règle CSS content appliquée dans un sélecteur :before ou :after.
Une utilisation typique de content : personnaliser l'affichage d'une liste à puces. On définit une règle indiquant qu'il n'y a pas de puce puis on ajoute un caractère de notre choix devant chacun des éléments de la liste.
Ex :
ul {
list-style: none;
}
ul li:before {
content: "-";
}
En appliquant cette règle CSS à une liste, nous obtiendrons ceci :
Il est possible d'obtenir un résultat encore plus intéressant en utilisant des codes Unicode représentant des caractères spéciaux.
Ex :
ul li:before {
content: "\2666 \0020"; /* un losange suivi d'un espace */
color: #a70101; /* rouge vin */
}
Et voici le résultat :
« Unicode ». FileFormat.info. http://www.fileformat.info/info/unicode/
« Glyphs ». CSS Tricks. https://css-tricks.com/snippets/html/glyphs/
▼Publicité
