You can easily create numbered headings using generated content and counters. Example:
h1 {
counter-increment: chapter 1;
}
h1:before {
content: "Chapter " counter(chapter, upper-latin) " - ";
}In this example, a counter called "chapter" is increased by an increment of 1 every time a "h1" element is encountered. The value of this counter is appended before the content of every "h1" element using generated content.
Of course, if your document has multiple levels of headings, you do not want all headings to be continuously incremented across the entire document. For example, the counter of a section of a chapter should be reset every time a chapter ends and a new chapter begins. To achieve this, you can use the "counter-reset" property.
Example:
h1 {
counter-increment: chapter 1;
counter-reset: section 0;
}
h1:before {
content: "Chapter " counter(chapter, upper-latin) " - ";
}
h2:before {
content: "Section " counter(chapter, upper-latin) "." counter(section) " - ";
}In this example, the "section" counter is reset to "0" every time a new chapter begins. This ensures sections are not numbered continuously across the entire document, but rather for each chapter.