Pure CSS Line Numbers

15-07-2016

---

I was messing around with an easy way of display code on my website, and stumbled upon a neat trick for making incrementing line numbers with CSS.

.codeblock {
  counter-reset: step;
  counter-increment: step 0;
}
.codeblock .line:before {
  content: counter(step);
  counter-increment: step;
}

The final result is awesome! Check it out:

See the Pen CSS line numbers by Tristan White (@triss90) on CodePen.