Missed CSS: counters
Numbering without ordered lists.
CSS Counters
HTML
<div>
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>
CSS
div {
counter: number;
}
div span {
display:block;
counter-increment: number;
}
div span:before {
content: counter(number);
width: 1.5em;
height: 1.5em;
border-radius: 1.5em;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 0.3em;
margin-bottom: 0.5em;
background: #000;
color: #fff;
}
And now we have numbering without ordered list. The immediate benefit being that we can style as we see fit.
First Second Third
With a small tweak we can choose different formats.
CSS
div span:before {
content: counter(number, upper-roman);
<-- lower-roman, lower-greek, upper-alpha, etc...-->
...
}
First Second Third
counter-reset
Using css counters we can define when to reset the counter. Here we'll use a section element to reset the counter.
div {
counter: number;
counter-reset: section;
}
<div>
<section>
<span>First</span>
<span>Second</span>
<span>Third</span>
</section>
<section>
<span>First</span>
<span>Second</span>
<span>Third</span>
</section>
</div>