Automated heading number css

How can I apply css with automated heading numbering, equivalent to header count ?
I want this result with including outline as well.

I've found css code below, but first numbering starts from header2, not from header1.
I want numbering from the first header, but I have no idea how to modify this code,

Can anybody help me and show me the modified css code?

Thanks!

/* Implement counters and numbering for h1-h6 titles */

body {
  counter-reset: h2;
}

h2 {
  counter-reset: h3;
}

h3 {
  counter-reset: h4;
}

h4 {
  counter-reset: h5;
}

h5 {
  counter-reset: h6;
}

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

h3:before {
  content: counter(h2, decimal) "." counter(h3, decimal) ". ";
  counter-increment: h3;
}

h4:before {
  content: counter(h2, decimal) "." counter(h3, decimal) "." counter(h4, decimal) ". ";
  counter-increment: h4;
}

h5:before {
  content: counter(h2, decimal) "." counter(h3, decimal) "." counter(h4, decimal) "." counter(h5, decimal) ". ";
  counter-increment: h5;
}

h6:before {
  content: counter(h2, decimal) "." counter(h3, decimal) "." counter(h4, decimal) "." counter(h5, decimal) "."
    counter(h6, decimal) ". ";
  counter-increment: h6;
}

/* Implement similar counters and numbering in the TOC  */

nav.table-of-contents li ul {
  counter-reset: toc-counter;
}
nav.table-of-contents li {
  display: block;
}
nav.table-of-contents :not(li) ul li:before {
  content: counters(toc-counter, ".") " ";
  counter-increment: toc-counter;
}
3 Likes

Thank you very much, Tessus!

You are welcome.

1 Like