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-resetproperty
that resets a counter value to zero