Make the numbering style using CSS counter, is an alternative to creating list in addition to HTML element. Counter is one of the CSS function which might be rarely used by programmers beginners like me. Maybe we are accustomed to using looping to create a counter or may not even know that the CSS has the ability to make auto increment.
Table of Contents
What is CSS Counter ?
According to www3schools.com, the counters resemble a “variables”, where the value of the variable can be incremented automatically using specific rules by CSS. In short, you can create ordered list using all of HTML element.
There is 3 basic attributes that must be used on CSS counter, namely:
- counter-reset: is used to declare a variable. If the initial value is not given then the variable will start at zero.
- counter-increment: used to add a counter value.
- counter(variable, type output): used to make the output of the variable, along with the type of each.
The following examples use the CSS counter in base
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <div id="content"> <div class="article"> This is section one </div> <div class="article"> This is section two </div> <div class="article"> This is section three </div> <div class="article"> This is section four </div> <div class="article"> This is section five </div> <div class="article"> This is section six </div> <div class="article"> This is section seven </div> <div class="article"> This is section eight </div> </div> <style> .content { counter-reset: item 0; } .article { counter-increment: item; } .article:before { content: counter(item); display: inline; } </style> |
Moreover, we can do the increment with different values. for example, if you want to increase 3 points, the writing counter as follows
1 2 3 4 5 6 7 8 9 10 11 12 | .content { counter-reset: item 0; } .article { counter-increment: item 3; } .article:before { content: counter(item); display: inline; } |
We can display the results in the form of the alphabet in the following ways:
1 2 3 4 5 6 7 8 9 10 11 12 | .content { counter-reset: item 0; } .article { counter-increment: item 1; } .article:before { content: counter(item,lower-alpha); display: inline; } |
In addition to lower-alpha, we can replace it with the following values
- decimal.
- upper-alpha.
- lower-roman.
- upper-roman
Thus my brief tutorial on How To Create Auto Increment Using CSS “Counter”, may be useful.
Leave a Reply