CSS counter-increment Property

The counter-increment property defines how much the values of counters should increase or decrease. This property is used with the content and counter-reset properties.

The counter-increment property is specified by two values: none and id numbers. "None" is the default value of this property. It allows to use negative values in the case of "id number" value. The default increment is 1. If counter id is not initialized by counter-reset, the default value is 0.

Initial Value none
Applies to All elements.
Inherited No.
Animatable Discrete.
Version CSS2
DOM Syntax object.style.counterIncrement = "subsection";

Syntax

counter-increment: none | id number | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      /* "my-counter" to 0 */
      counter-reset: my-counter;
      }
      h2::before {
      /* "my-counter" by 1 */
      counter-increment: my-counter;
      content: "Section " counter(my-counter) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>

Another example where sections and subsections are numbered.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      /* Set "section" to 0 */
      counter-reset: section;
      }
      h1 {
      /* Set "subsection" to 0 */
      counter-reset: subsection;
      }
      h1::before {
      counter-increment: section;
      content: "Book " counter(section) ": ";
      }
      h2::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h1>HTML</h1>
    <h2>HTML Basics</h2>
    <h2>HTML Templates</h2>
    <h2>HTML References</h2>
    <h2>HTML Tags</h2>
    <h1>CSS</h1>
    <h2>CSS Basics</h2>
    <h2>CSS References</h2>
    <h2>CSS Advanced</h2>
    <h2>CSS Guides</h2>
    <h2>CSS Selectors</h2>
    <h2>CSS Properties</h2>
  </body>
</html>

Values

Value Description
none Counters are not incremented. This is the default value.
id number Id defines which counter to increment. Number defines how much the counter will increment.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.




Related articles