Counter-increment

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>
  1. One
  2. Two
    1. Two.one
    2. Two.two
    3. Two.three
  3. Three
    1. Three.one
    2. Three.two
      1. Three.two.one
      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

Related:

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 Emw3.com
Some rights reserved