Implémenter la numérotation automatique des titres via CSS.

Code HTML et feuille de style CSS qui permettent de numéroter automatiquement les titres grâce à la numérotation à plusieurs niveaux (1.1, 1.1.1, etc.).

 29 oct 2024 ·  ≤ 1 min ·  

Code HTML

<h2>Titre de niveau 2</h2>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h3>Titre de niveau 3</h3>
<h3>Titre de niveau 3</h3>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Code CSS

body { 
  counter-reset: h2counter; 
}

h2 {
  counter-reset: h3counter h4counter h5counter h6counter;
}

h3 {
    counter-reset: h4counter h5counter h6counter;
}

h4 {
  counter-reset: h5counter h6counter;
}

h5 {
  counter-reset: h6counter;
}

h2::before {
    counter-increment: h2counter;
    content: counter(h2counter) ". ";
}

h3::before {
    counter-increment: h3counter;
    content: counter(h2counter) "." counter(h3counter) ". ";
}

h4::before {
    counter-increment: h4counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ". ";
}

h5::before {
  counter-increment: h5counter;
  content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ". ";
}

h6::before {
  counter-increment: h6counter;
  content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h5counter) ". ";
}

Articles similaires

Partage et commentaires

Partager cet article sur :  Mastodon  X (Twitter)  Facebook  LinkedIn  Reddit

Vous pouvez commenter cet article grâce à ce fil de discussion sur Mastodon (avec Mastodon ou un autre compte ActivityPub/​Fediverse).