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.
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
Moreover, we can do the increment with different values. for example, if you want to increase 3 points, the writing counter as follows
1
We can display the results in the form of the alphabet in the following ways:
1
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.
Latest posts by Sigit Prasetya Nugroho (see all)
- Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
- Create WordPress Slider Without Javascript - August 30, 2018
- Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018