The CSS counter-increment property acts like an incremented variable in a programming language - it specifies the amount to increment the specified counter by when the current CSS selector is encountered. The property lists one or more counter labels, each followed by an optional increment integer value (default increment is 1). Negative integers and zero are also valid.

If a counter is incremented and rendered using a single CSS selector (with the content property and :before/:after pseudo-elements), it should be incremented first, then rendered. If a single CSS selector both increments and resets a counter, it is reset, then incremented.


Value Description
inherit Explicitly sets the value of this property to that of the parent.
none Suppresses incrementing counters for the current selector.
<identifier> <integer>? + Specifies one or more counters and the amount to increment the counter by.

CSS examples:

h1 {
  counter-increment: chapter section 2 page;
  /* Increases the value of the chapter and page counters by 1
     and the section counter by 2. */
h1:before {
     counter-increment: main-heading;
     counter-reset: sub-heading;
     content: "Section " counter(main-heading) ":" 

See Also

External Links

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.