Skip to content

Instantly share code, notes, and snippets.

@jirutka

jirutka/sample.png

Last active April 26, 2023 14:03
Show Gist options
  • Save jirutka/32049196ab75547b7f47 to your computer and use it in GitHub Desktop.
Save jirutka/32049196ab75547b7f47 to your computer and use it in GitHub Desktop.
Download ZIP
Nested numbered list with correct indentation in CSS. Live example at http://jsfiddle.net/a84enL8k/.
Raw
style.css
/**
* 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, ".") " ";
}
Raw
style.scss
/**
* 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, ".") " ";
}
}
@rajvijen
Copy link

Thank you so much. This is a lifesaver! I've been trying to figure this all week.
Is there any way to use other style types (or even mixed perhaps)?

@ix4 These are some list style types -

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment