As you could read in the article «Start number of a list with CSS», counter management in CSS allows us to alter the standard behavior of ordered lists in HTML. In this case we are going to see how we can increment items in an HTML list two by two.
By default ordered lists start with the value 1 and are incremented one by one. We will rely on the property counter-increment attribute to alter this behavior.
The syntax of the counter-increment is as follows:
counter-increment: idcounter increment
By default, the increment value is 1. That is, if we want them to increment by two we will have to assign the value of 2.
Leaving the definition of the style on the LI element as follows:
li:before {
content: counter(item) ". "
counter-increment: item 2;
}
Although, we will have to have previously defined the start value of the counter. This is provided to us by counter-reset property. That is why about the OL element we will define the following style:
ol {
counter-reset: item -1;
}
The value of -1 is so that the list really starts with 1. Since the increment will be applied to all elements, including the first one. So, by incrementing 2 to -1, we will have the first element being 1.