Missed CSS: counters

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: 2.5em;
  height: 2.5em;
  border-radius: 2.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>

First Second Third