Missed CSS: counters

CSS Counters

HTML

<div>
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
</div>

CSS

div {
  counter: number;
}
div p {
  counter-increment: number;
}
div p:before {
  content: counter(number);
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 0.3em;
  background: #000;
  color: #fff;
}

And now we have numbering without ordered list. The immediate benefit being that we can style as we see fit.

With a small tweak we can choose different formats.

CSS

div p:before {
  content: counter(number, upper-roman);
  <-- lower-roman, lower-greek, upper-alpha, etc...-->
  ...
}

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>
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
  </section>
  <section>
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
  </section>
</div>