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: ss64counter; }
.ss64class { counter-reset: ss64counter; }

#SS64id { counter-reset: ss64counter; }

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

h2:before
{
counter-increment: ss64;
content: counter(ss64) " ~ ";
}

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:

content - Insert generated content before or after an element.
counter-increment - Increment one or more counters.


© Copyright SS64.com 1999-2014
Some rights reserved