Create or reset one or more counters.
Syntax
counter-reset: variable [number] [variable [number]] [...] ;
variable - The counter(s) to be reset.
number - The initial value of the counter. ( default = 0)
To reset multiple counters based on the same tag, use a single style rule H1{counter-reset: var1 var2;}
Examples:
h1 { counter-reset: Emw3counter; }
.emw3class { counter-reset: Emw3counter; }
#emw3id { counter-reset: Emw3counter; }
If the counter is reset for the <body> tag, the numbering will run for the entire document, if the counter is reset for the <H1> tag the numbering will run until the next occurence of an <H1> tag. Multiple variables can be used to count Section numbers, Headings, Footnotes etc. These can then be added to the document using content: and the :before and :after pseudo-elements.
Adding a counter to the <H2> tag so that each line will be prefixed with "number ~ " :
h1 {counter-reset: Emw3;}
h2:before
{
counter-increment: Emw3;
content: counter(Emw3) " ~ ";
}
(CSS 2) Browser Support: All major browsers.
“Sir, my friend John Baynes used to say that the man who published a book without an index ought to be damned ten miles beyond Hell, where the Devil could not get for stinging nettles” ~ Francis Douce
Related:
counter-reset - MDN Web Docs.
content - Insert generated content before or after an element.
counter-increment - Increment one or more counters.