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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s