It’s not uncommon to see academic texts where bulleted lists are split apart by paragraphs or new headings. Never having coded a document like this, I wondered how and if ordered lists could be split apart while maintaining numbering. With some experimentation, I learned about the CSS properties
The document I want to recreate looks something like this:
Introductory Heading 1. Some interesting point. 2. Another interesting point. Secondary Heading 3. A fine example. 4. Yet another good point. 5. Lots of good information. Third Heading 6. A final, great point.
To mark this up in HTML, I have:
But of course, when you preview this markup, you’ll see the numbering resets with each new section.
Enter CSS Counters
I learned about two very useful CSS properties:
counter-increment which can help achieve the result I’m seeking.
counter-reset property allows you to automatically number HTML elements. While I’m using it for an ordered list in this example, you can easily imagine using it for numbered headings in a detailed specification or academic text.
counter-reset property takes the following input:
So you give a counter a name and apply that to the property where you want to begin your list:
Next, we need some way to tell
listcounter to increment and that’s where the property,
counter-increment comes in.
counter-increment property is applied to the elements you want to count. In my example, I want to increment with each list item. The
counter-increment property accepts similar values as
Using the counter
Because we’re using a counter to increment the list in this example, we don’t want the list to show numbers, they’ll be set by the
listcounter. This means we need to set the list style and margins appropriately:
We need to display the numbers from the
listcounter. This is easy to do using the
You’ll notice that I’m using the
:before selector in the example above. This means that before each
li, some content is inserted. And in this case, it’s the current value of
listcounter, followed by a period and a space. Then the counter is incremented by 1.
In my example, I’ve created two CSS classes,
continue. The mark up for the original HTML looks like this now:
Pretty simple! And now we have a numbered list that doesn’t reset with the start of a new section. You can see the result in the Code Pen example below.
You can do all sorts of things with counters - lists that count backwards, deeply structured contents and indexes, and so much more!