CSS Counter increment

How to create the counter increment using CSS like the bullet. CSS provides the counter functionality using that we can create the number before stating lists as per line like the bullet number.

Let’s create the HTML code for our counter.

<div class="lists">
<p>First Element</p>
<p>Second Element</p>
<p>Third Element</p>
<p>Four Element</p>
<p>Five Element</p>
<p>Six Element</p>
<p>Seven Element</p>
</div>

Let’s creat the counter code for our listing using CSS.


<style type="text/css">
.lists {
counter-reset: headings;
list-style: none;
}
.lists > p:before {
background: none repeat scroll 0 0 #8F8888;
border-radius: 15px;
color: #FFFFFF;
counter-increment: headings;
content: counter(headings, decimal);
display: block;
float: left;
font-size: 16px;
font-weight: bold;
height: 25px;
line-height: 26px;
margin-bottom: 0;
margin-right: 5px;
top : -5px;
position: relative;
text-indent: 8px;
width: 25px;
}
</style>

Using above code you can create the listing counter on any  HTML tag listing like above. The output look like below.

CSS Counter

If you have any issue or question write comment below.