Do you ever wish the table you were looking at had numbered rows?

I had the thought gosh I wish this table’s rows were numbered when I was looking at the big table of Interop 2024 popular votes. I don’t know the that the <table> needed numbering, but when I wanted to know the “rank” of some of the items, I found myself wishing it did.

Fortunately, CSS has a quick answer:

table {
  counter-reset: tr;
  tbody tr {
    counter-increment: tr;
    :where(td, th):first-child::before {
      content: "#" counter(tr) ": ";
    }
}Code language: CSS (css)

The idea there is that you can count things in CSS with CSS counters, then display that value as a pseudo element slapped in there wherever you want it. The nesting is nice there as you can just plop it into any ol’ applied CSS and adjust the selector to the table you need it to.