# counter-increment property

The `counter-increment` property specifies automatic numbering of elements, such as paragraphs or headings. It is used together with the `counter-reset` property, `after` and `before` pseudo-elements, `content` property, inside which the `counter` function is used. For a better understanding, I recommend looking at the examples.

## Syntax

`selector { counter-increment: name [step] | none; }`

## Values

Value | Description
--- | ---
name | A counter name. An ordinary word (like a class name or id). You can specify multiple names, separating them with a space. In this case, several counters will change simultaneously.
step | A positive or negative integer. Optional.
`none` | Prevents incrementing the counter for the current selector.

Default value: `none`.

## Example

Let's make paragraphs numbered automatically:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test; } #parent p::before { counter-increment: test; content: counter(test); }`

:

## Example

Let's add some text in addition to the numbering. In our case, `№` before a number and a dot after:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test; } #parent p::before { counter-increment: test; content: "№" counter(test) "."; }`

:

## Example

Let's start the numbering from `10`. To do this, we set the initial value of the counter to nine, that is, `1` less than we need:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test 9; } #parent p::before { counter-increment: test; content: "№" counter(test) "."; }`

:

## Example

Now let the numbering be with a step of "`2`". To do this, we put two as the step:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test; } #parent p::before { counter-increment: test 2; /* we put a two */ content: "№" counter(test) "."; }`

:

## Example

In the previous example, the numbering started with two, but we wanted it to start with one. Why did this happen? Because `counter-reset` resets the counter values to zero, and then `counter-increment` adds its step: one by default, so before our numbering started with `1`. And now two is added - and the numbering starts with two.

To fix the problem, we set the initial value of the counter to `-1` and now the numbering will start from `1` and will increase by `2`:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test -1; } p::before { counter-increment: test 2; content: "№" counter(test) "."; }`

:

## See also

- the `counter-reset` property
  that resets a counter value to zero

← →
↑
en ru