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

: Category: Cascading Stylesheets; 30 November -0001; Hits: 5377

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.

copy raw

// 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 Have
1. Item 1
1.1 Item 1a
1.2 Item 1b
...
1.9 Item 1c
1.10 Item 1d
2. Item 2

copy raw

// 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 Want
1. Item 1
1.1 Item 1a
1.2 Item 1b
...
1.9 Item 1c
1.10 Item 1d
2. Item 2

copy raw

// 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

// 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:

copy raw

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;
}