CSS Ordered List Alignment

by Jlipman

HTML

<html>
<head>
<title>CSS Ordered List Alignment</title>
</head>
<body>
<b>Corrected List</b>
<ol>
<li>Item 1.0
<ol>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<li>Item 1.4</li>
<li>Item 1.5</li>
<li>Item 1.6</li>
<li>Item 1.7</li>
<li>Item 1.8</li>
<li>Item 1.9</li>
<li>Item 1.10</li>
</ol>
</li>
<li>Item 2.0</li>
</ol>
</body>
</html>

CSS

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