Is it possible to create an ordered list like the following? I like this for a table of contents I\'m creating.
There's quite a number of jQuery plugins to generate a table of contents.
Look at this one for starters
Another one here, with ordered lists
This can indeed be done with pure CSS:
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".")" ";
counter-increment: item
}
Same example as a fiddle: http://jsfiddle.net/N79nP/
Have you seen this post: Number nested ordered lists in HTML
I don't think it can be done without using JS.
This code leads to the desired output for me:
<ol>
<li>
<a href="#Lnk">foo</a>
</li>
<li>
<a href="#Lnk">bar</a>
<ol>
<li>
<a href="#Lnk">baz</a>
</li>
<li>
<a href="#Lnk">qux</a>
</li>
</ol>
</li>
<li>
<a href="#Lnk">alpha</a>
<ol>
<li>
<a href="#Lnk">beta</a>
</li>
<li>
<a href="#Lnk">gamma</a>
</li>
</ol>
</li>
</ol>
CSS:
ol {
counter-reset: item;
}
li {
display: block;
}
li::before {
content: counters(item, ".")". ";
counter-increment: item;
}
Fiddle: http://jsfiddle.net/Lepetere/evm8wyj5/1/