How To Create Auto Increment Using CSS Counter

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, 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.

How To Create Auto Increment With Css Counter

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


Moreover, we can do the increment with different values. for example, if you want to increase 3 points, the writing counter as follows


We can display the results in the form of the alphabet in the following ways:


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.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.