Last active
April 26, 2023 14:03
-
-
Save jirutka/32049196ab75547b7f47 to your computer and use it in GitHub Desktop.
Nested numbered list with correct indentation in CSS. Live example at http://jsfiddle.net/a84enL8k/.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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, ".") " "; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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, ".") " "; | |
| } | |
| } |
<span>M</span> <span>M</span> in any LI yields to "MM" instead of "M M" due to display: table. Any idea how to properly render default whitespace (since ASCII 160 works fine) between consecutive tags?
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
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)?