Comment créer des listes numérotées rien qu’en css
Voici une fonctionnalité bien pratique pour créer ses listes dynamiques sans avoir à passer par des pseudos éléments avec images.
Créer une instance du compteur
On commence par créer une instance du compteur avec l’attribut counter-reset sur la liste.
On annule le style par défaut avec le list-style-type:none.
Dans mon exemple, je ne me sert pas de ce code par défaut, et ca marche très bien.
Incrémenter ses items
Sur l’item du menu, on incrémente le compteur li, avec counter-increment: li; Puis en utilisant un pseudo element, on précise l’élément à incrémenter, ici nos items de menu « li » : content: counter(li); De cette façon, à chaque nouveau « li », on aura notre numéro qui va s’afficher.
See the Pen
Counters CSS by blindDev (@yuyazz)
on CodePen.
Vous trouverez différentes manière de faire sur le web, à vous de trouver celle qui conviendra à votre site !
Et voici pour finir un cas pratique: pour expliquer le fonctionnement d’une fonctionnalité sur un site, on veut afficher la procédure à suivre sans que ca prenne trop de place. On crée donc un accordéon, un lien ou une div, sur lequel on clique pour dérouler les étapes à suivre. Ici au lieu d’une simple liste, on numérote chaque étape pour plus de clarté.
See the Pen
content:counter(li) by blindDev (@yuyazz)
on CodePen.