Chatterbox

Manage Numbering with CSS Counters

Want your numbered list to start at a different number? CSS can handle it! Just use counter-reset and some strange thing I've never seen called CSS Counters.

Here's a quick example. Set the value:

.postlist {
  counter-reset: start-from 42;
}

Then later:

.postlist-item {
  counter-increment: start-from -1;
}

Backstory #

I encountered this on this line in the 11ty base blog project.

At first, I thought it was some odd Nunjucks scoping thing. But it wasn't surrounded by braces to make it a variable. I tried to find start-from as some special variable, either in the project or in MDN. It only existed in the public CSS for the project, where it was used. But nothing else in that CSS file seemed to make it spring into existence.

I guess that's kind of the point. Some CSS somewhere can make start-from, or daffy-duck, or any other "symbol" name spring to life. Then something else can reference it.