Skip to content

Instantly share code, notes, and snippets.

@leeovery
Forked from jirutka/sample.png
Created March 11, 2022 09:27
Show Gist options
  • Save leeovery/a6c1874cffd40cdbb158cc287170b63d to your computer and use it in GitHub Desktop.
Save leeovery/a6c1874cffd40cdbb158cc287170b63d to your computer and use it in GitHub Desktop.
Nested numbered list with correct indentation in CSS. Live example at http://jsfiddle.net/a84enL8k/.
/**
* Nested numbered list with correct indentation.
*
* Tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
* Source: https://gist.github.com/jirutka/32049196ab75547b7f47
*/
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
/**
* Nested numbered list with correct indentation.
*
* Tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
* Source: https://gist.github.com/jirutka/32049196ab75547b7f47
*/
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
&:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
}
li ol > li {
margin: 0;
&:before {
content: counters(item, ".") " ";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment