How To Increment Numbers Automatically In CSS Counters

You have probably seen many websites where that display an incrementing number on their website. But what if I told you there was a way to do this without using JavaScript or jQuery?

CSS counters allow you to create dynamic elements on web pages. In this tutorial, we’ll show you how to add a counter to an element using CSS.

Counter-based styles are used in many different situations. For example, you might use a counter to display the number of items in a list or to count down to a specific date.

Create a new HTML page with a heading tag.

<!-- Add a class name to the heading tag. -->
<!-- Add some text inside the heading tag. -->
<h5 class="title">HTML</h5>
<h5 class="title">CSS</h5>
<h5 class="title">JavaScript</h5>

Add a CSS counter style to the heading tag.

.title{
   counter-increment: h5;
}
/* The counter will start at 1. */
.title::before{
   content: "Chapter " counter(h5) ": ";
   color: #ffa07a;
}

It’s a great way to create dynamic counters without using JavaScript.

Example

See the Pen Increment Numbers by Vimalraj (@w3tweaks) on CodePen.