Formation PUB050 : Les feuilles de style (CSS), 2023 Quelques techniques intéressantes

6.2 Liste personnalisée en ajoutant un caractère unicode avant ou après un élément HTML


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 :

CSS

ul {

    list-style: none;

}

 

ul li:before {

    content: "-"; 

}

En appliquant cette règle CSS à une liste, nous obtiendrons ceci :

  • Premier élément
  • Deuxième élément
  • Troisième élément

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 :

CSS

ul li:before {

    content: "\2666 \0020"; /* un losange suivi d'un espace */

    color: #a70101; /* rouge vin */

}

Et voici le résultat :

  • Premier élément
  • Deuxième élément
  • Troisième élément

▼Publicité Le texte se poursuit plus bas

Pour plus d'information

« Unicode ». FileFormat.info. http://www.fileformat.info/info/unicode/

« Glyphs ». CSS Tricks. https://css-tricks.com/snippets/html/glyphs/

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Par Christiane Lagacé
Dernière révision le 14 septembre 2017
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre