Increment one or more counter values.
Syntax counter-increment: variable number | none | inherit ;
variable - The counter to be incremented.
number - How much the counter will increment on each occurrence of the selector. Zero or negative values are allowed (default = 1 or 0 if not initialised).
none - No counters will be incremented.
inherit - inherit from the parent element.
Examples:
h1 { counter-increment: Emw3counter; }
.emw3class { counter-increment: Emw3counter; }
#emw3id { counter-increment: Emw3counter; }
The variable being used must first be initialised or reset with counter-reset, 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.
Legal numbering:
OL { counter-reset: Emw3; padding-left: 10px; }
LI { display: block }
LI:before { content: counters(Emw3, ".") " "; counter-increment: Emw3; }
<ol><li>One</li> <li>Two <ol><li>Two.one</li> <li>Two.two</li> <li>Two.three</li></ol></li> <li>Three <ol><li>Three.one</li> <li>Three.two <ol> <li>Three.two.one</li> <li>Three.two.two</li></ol></li></ol></li> <li>Four</li></ol> |
|
(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-increment - MDN Web Docs.
content - Insert generated content before or after an element.
counter-reset - Create or reset one or more counters.