Counter-reset

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) " ~ ";
}

Title (H1)

some text (H2)

some text (H2)

some text (H2)

Title (H1)

some text (H2)

(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.


Copyright © 2013-2022 Emw3.com
Some rights reserved