Automatic add numbering without ordered list (counter increment)

In this tutorial, we’ll show you how can you add numbering to any set of elements automatically by using counter-increment.

Now you are not dependent upon the ordered list for showing automatic numbers.

With counter-increment you can also add any text before or after the number as we added dot(.) after the number in this tutorial.

Preview

This is the result, you will get at the end.

Html

Just add this html in your page wherever you want but we suggest this to keep just after opening the body tag.

 <div class="number-boxes">
  <div class="number-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
  </div>
  <div class="number-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
  </div>
  <div class="number-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
  </div>
  <div class="number-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
  </div>
  <div class="number-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
  </div>
  <div class="number-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
  </div>
</div>

Css

Now add this css into your css file and see the preview.

body{
padding:0;
margin:0;
background:#0b111c;
font-family:'Lato';
}

.number-boxes{
display: flex;
flex-wrap: wrap;
counter-reset: my-counter;
}

.number-box{
position: relative;
width:calc(25% - 30px);
margin:25px 15px;
padding: 30px 30px 30px;
background: #1d304d;
font-size: 18px;
line-height: 26px;
color: #fff;
}

.number-box:before{
content: counter(my-counter) ".";
counter-increment: my-counter;
background:#f7b424;
color: #1d2f4d;
width: 40px;
height: 40px;
border-radius:50%;
position: absolute;
left: 30px;
top: -20px;
font-size: 20px;
line-height: 40px;
font-weight:bold;
text-align: center;
}

Preview

This is the result, you will get at the end.

Read also: Button with gradient borders in CSS