Styling Nested Ordered Lists via counter and content

by J. Albert Bowden

HTML

<ol>
    <li>Main heading
        <ol>
            <li>Sub Heading</li>
            <li>Sub Heading</li>
            <li>Sub Heading
                <ol>
                    <li>Sub Sub Heading</li>
                    <li>Sub Sub Heading</li>
                </ol>
            </li>
            <li>Sub Heading</li>
        </ol>
    </li>
</ol>

CSS

ol {counter-reset:top sub subsub;}
ol ol{padding-left:1em; counter-reset:sub}
ol ol ol{padding-left:2em; counter-reset:subsub; background-color:#c0c0c0}
li{font-weight:700}
li li{font-weight:200}
li li li{font-weight:200; font-family:monospace}
li:before {
    counter-increment:top;
    content: counter(top) ". ";
}
ol ol li:before {
    counter-increment:sub;
    content: counter(top) "." counter(sub) " ";
}
ol ol ol li:before {
    counter-increment:subsub;
    content: counter(top) "." counter(sub) "." counter(subsub) " ";
}