Point-Numbered Lists With CSS Counters

The biggest challenge in ordered lists is creating point-numbered presentations, as you might see in an extensive contract or other legal document, using numbers like 5.1 and 3.7. To gain these while retaining an ordered list structure, we must turn to CSS counters.

Let’s say you want to want to have a series of ordered lists starting with 1.1. First, we must create the correct HTML markup. (I’m using HTML5 shortcuts to save on space).

<h2>Legalese</h2>

<ol>

<li>Flibbert

<ol>

 <li>Flibberme

 <li>Giblet

</ol>

<li>Me Giblets

 <ol>

 <li>Beep

 <li>Bop

 <li>Boop

 </ol>

</ol>

The easiest way to understand CSS counters system is that they act like an odometer that is incremented by encountering specified elements.

First, we set up the ordered list to not show list item numbers:

ol { list-style-type: none; }

Then set up the first counter “odometer” to restart whenever an <ol> element is encountered:

ol { counter-reset: section; }

The odometer will increment with every list item:

li { counter-increment: section; }

And before every (undecorated) list item, create some generated content that includes the current section count:

li:before { content: counters(section, ".") " "; }

The result:

Legalese

1. Flibbert
2. Me Giblets