CSS Ordered List 1, 1.1...1.10 Formatting and Alignment

What?
A quick article to remind me on how create an multi-level ordered list that indents and aligns correctly.

Why?
I'm finding that I need to do this quite often for some clients who want to include their terms and conditions in quote/invoice templates and want the HTML to be indented neatly.

Other examples out there will work, but I found that once the list count increased the number of digits (eg. 1.10) the text would be more indented (relative) to 1.1. I need all list elements to be all perfectly aligned.
// What I Have

1.   Item 1
     1.1   Item 1a
     1.2   Item 1b
     ... 
     1.9   Item 1c
     1.10   Item 1d
2.   Item 2
// What I Want

1.   Item 1
     1.1   Item 1a
     1.2   Item 1b
     ... 
     1.9   Item 1c
     1.10  Item 1d
2.   Item 2
// What I DON'T Want  (happens if you use list-style-position: outside)

1.   Item 1
      1.1  Item 1a
      1.2  Item 1b
      ... 
      1.9  Item 1c
     1.10  Item 1d
2.   Item 2

How?
I've been refining this based on several examples and the following solution seems to be the most stable:
ol {
    list-style-type: none;
    counter-reset: myCounter;
    display: table;
    margin: 0;
    padding: 5px 0 5px 15px;
}

ol > li {
    counter-increment: myCounter;
    display: table-row;
}

ol > li:before {
    content: counters(myCounter, ".") ". ";
    display: table-cell;
    position: relative;
    left:-12px;
}

li ol > li:before {
    content: counters(myCounter, ".") " ";
    position: relative;
    left:-15px;
}

DEMO: See my JsFiddle at: jsfiddle.net/Jlipman/6vkw7tc3/4

Related Articles

Joes Revolver Map

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin - Valid till 8 May 2022 3QnhmaBX7LQSRsC9hh6Je9rGQKEGNQNfPb
© 2021 Joel Lipman .com. All Rights Reserved.