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;
}