Decimal Ordered Lists | Tyler Wangsgard, Designer

Decimal ordered lists or decimal outlines can be useful when it is desired to have nested lists where every <li> identifies its relationship to all of its predecessors. This style would be useful in official documents for government and other similar organizations.

BONUS! Check out Item One for an example of anchoring to a specific <li>.

Accessibility Notice

I have verified that both the VoiceOver and Spoken Content features in iOS 13's Accessibility options identifiy each number as expected for all users. Since the numbering is put in place using the pseudo-element of ::before, be advised that the numbers shown on screen might not be accessible for all screen readers.

Sample

Part One
1. Section One
  1. Clause One
  2. Clause Two
2. Section Two

Code

The code below is the magic that makes the above sample happen.

<div class="decimal"> <ol> <li>Part One <ol> <li>Section One <ol> <li>Clause One</li> <li>Clause Two</li> <ol> <li id="item-one">Item One <ol> <li>Subitem</li> </ol> </li> <li>Item Two</li> </ol> </li> </ol> </li> <li>Section Two</li> </ol> </li> </ol> </div> <style> .decimal ol { list-style-type: none; counter-reset: item; margin-left: .125rem; } .decimal li { display: table; padding-top: .375rem; } .decimal li::before { display: table-cell; content: counters(item, ".") ""; counter-increment: item; padding-right: .5rem; letter-spacing: .125rem; /* - - - - - - - - - - - - - - - - - OPTIONAL STYLING */ font-weight: bold; color: #9F2214; } </style>

Adapted from: stackoverflow.com

Obstacles Encountered

I would prefer to give the original <ol> the class of "decimal" rather than wrapping it in a DIV with that class as it would make the code a little simpler. However I ran into the problem of the first nested <ol> not reflecting its relationship as a child of the outmost <ol>. Every following <ol> was fine from that point on. See the example below.

First list
1. Second list
  1. Third list
    1. Fourth list