Ajouter un caractère avant ou après un élément HTML : technique pour personnaliser une liste à puces

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.

▼Publicité

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
Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories