Donnez du style à vos listes d'éléments HTML 2 - Style des listes d'éléments HTML : génération de contenu avec :before

Passons à présent à un autre registre, moins souvent exploré et pourtant bien plus vaste : la génération de puces avec le pseudo-élément CSS :before.

Introduit en CSS2 (mais malheureusement reconnu qu'à partir d'Internet Explorer 8), :before permet de générer du contenu avant un élément. Ce contenu peut être une chaîne de caractères, une image de fond ou une valeur d'attribut.

Le cas des listes ordonnées est quelque peu particulier

Les éléments de liste sont un cobaye parfait pour ce genre d'outil, à condition de prévoir une alternative pour les anciennes versions d'Internet Explorer.


Listes non ordonnées (<ul>)

La génération de contenu en CSS passe obligatoirement par une combinaison de :before (ou :after) et de la propriété content; l'un ne va pas sans l'autre :

 li {list-style-type: none;} 
li:before { 
   content: "- "; /* on affiche une chaîne de caractère */ 
} 

Certains caractères complexes ou exotiques peuvent être définis d'une manière plus particulière, et fondés sur le code ISO 10646 (hexadécimal) que vous pouvez trouver par exemple sur ce site.

 li:before { 
   content: "\A4 \ "; /* caractère ISO 10646 */ 
} 

Cependant, dans la plupart des cas - et notamment si votre encodage est en UTF-8 - il est parfaitement possible d'écrire directement le caractère (copier/coller) sans passer par des artifices ou des encodages barbares :

 li:before { 
   content: "? "; /* caractère UTF-8 */ 
} 

Enfantin, n'est-ce pas ? Voici le résultat :

Listes ordonnées (<ol>)

Le cas des listes ordonnées est quelque peu particulier, notamment parce qu'il est nécessaire de disposer d'une puce différente (numérotée ou non) pour chaque élément de liste : difficile de s'en sortir avec des images de fond, par exemple.

Pour les listes ordonnées, les spécifications CSS 2.1 prévoient la possibilité d'employer des compteurs automatiques et personnalisables : le couple counter-reset et counter-increment.

 ol {counter-reset: repas;} /* on initialise et nomme un compteur */ 
li { 
   list-style-type: none; 
   counter-increment: repas; /* on incrémente le compteur à chaque nouveau li */ 
   margin-bottom: 10px; 
} 
li:before { 
   content: counter(repas); /* on affiche le compteur */ 
   padding: 0 20px 6px; 
   margin-right: 8px; 
   vertical-align: top; 
   background: #678; 
   -moz-border-radius: 60px; 
   border-radius: 60px; 
   font-weight: bold; 
   font-size: 0.8em; 
   color: white;        
} 

Les exemples d'usage des compteurs peuvent se révéler nombreux et variés, par exemple une liste de tâches entièrement stylée en CSS :

...Ou même un calendrier !