Loading lesson path
You can create multiple counters for different levels of numbering. The following example creates one counter for the page (named "section") and one counter for each <h1> element (named "subsection"):
Example body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {Formula
counter - increment:section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;content:
counter(section) "." counter(subsection) " ";
}The counters() function returns the current values of the named and nested counters, as a string. Here we use the counters() function to insert a string between different levels of nested counters:
Example ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}Formula
Used with the ::before and ::after pseudo - elements, to insert generated content counter - incrementCreates or resets one or more counters counter() Returns the current value of the named counter counters() Returns the current values of the named and nested counters