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.
See the Pen
Automatic add numbering without ordered list (counter increment) by SLICEmyPAGE (@slicemypage)
on CodePen.
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.
See the Pen
Automatic add numbering without ordered list (counter increment) by SLICEmyPAGE (@slicemypage)
on CodePen.
Read also: Button with gradient borders in CSS
Leave a Reply