using css counter-increment to add numbering to elements
i just found this element in css where you can add numbering to elements, very handy to add counters and things.
This uses the counter-increment: section;
in the main element and then adds the numbering counter with content: counter(section);
in the before element to add the numbers to the before part of the element.
HTML
<div class="counter-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis</p>
</div>
CSS
.counter-wrap p {
counter-increment: section;
position:relative;
}
.counter-wrap p:before {
content: counter(section);
display:inline-block;
font-size:22px;
padding:0px;
background:#EEE;
color:#444;
border-radius: 60px;
margin-right:5px;
height:30px;
width:30px;
text-align:center;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis