"/>

counter css

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.

ol { 
counter-reset: li; 
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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.