Increment one or more counter values.

      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.

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></li>
  1. One
  2. Two
    2. Two.two
    3. Two.three
  3. Three
    2. Three.two
      2. Three.two.two
  4. Four

(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


counter-increment - MDN Web Docs.
content - Insert generated content before or after an element.
counter-reset - Create or reset one or more counters.

Copyright © 2013-2022
Some rights reserved