Liste avec numérotation automatique et personnalisée: a), b), ...

Le listes ordonnées <ol> acceptent 5 types de numérotation
  • 1 pour les chiffres (par défaut),
  • a pour les lettres minuscules,
  • A pour les lettres majuscules,
  • i pour les chiffres romains minuscules
  • et I pour les chiffres romains majuscules
Par exemple,
<ol type="a">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>...</li>
</ol>
donne
  1. Item 1
  2. Item 2
  3. Item 3
  4. ...
Pour personnaliser l'affichage du compteur, par exemple simplement pour afficher a), b), c), ... il faut l'indiquer via le style css.
On enleve alors le style de la liste (list-style-type:none), on définit un compteur (counter-reset), puis on place devant chaque item li de la liste ce que l'on souhaite avec la méthode before:
css:
ol.ablist{
    list-style-type:none;
    counter-reset:ab;}
ol.ablist li::before{
    content: counter(ab,lower-alpha) ") ";
    counter-increment:ab}

et le html:
<ol class="ablist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>...</li>
</ol>
pour obtenir
  1. Item 1
  2. Item 2
  3. Item 3
  4. ...
Bien sûr on peut ainsi personnliser complètement les listes (ordonnées ou non) avec tout type de caractères.


Voir aussi:
LongPage: h2: 0 - h3: 0