-
-
Save jirutka/32049196ab75547b7f47 to your computer and use it in GitHub Desktop.
| /** | |
| * 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, ".") " "; | |
| } | |
| } |
@pbb72 You’re right, I’ve updated the style. Thanks!
@pbb72 Great job, but How I need to do to consider the "start" attribute?
Ex:
<ol start="50">
<li>Coffee</li>
<ol>
<li>Tea</li>
</ol>
<li>Tea</li>
<li>Milk</li>
</ol>
Hi @fadonascimento. Wondering the same too. <ol start="#"> isn't working. Your thoughts?
With this code, when I use ol start="somevalue" it doesn't apply (It starts from "1" and not from the value that I entered). Maybe I need to add another line? Thank you and great job.
With this code, when I use ol start="somevalue" it doesn't apply (It starts from "1" and not from the value that I entered). Maybe I need to add another line? Thank you and great job.
Try to change start="somevalue" to style="counter-reset: item somevalue;"
<ol style="counter-reset: item 50;">
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
<li>Milk</li>
</ol>
<style>
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, ".") " ";
}
</style>
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)?
<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 -
This will also number all list items on unordered lists, which is not what you want. I made a fork fixes that, but I have no idea how to send a Pull Request (new to GitHub).