I want to define an ordered list, that looks like this:
3. Foo
1. Foo
2. Bar
3a. Bar
I already know I can use
<ol start=3></ol>
markup to skip items 1 and 2, but I don't know how can I make the last element use "3a" as it's name, without nesting another list like this: "3. a. Bar".
Is this even possible in HTML?
You can do like:
HTML:
<ol>
<li>One</li>
<li>Two</li>
<li class="newList">Three</li>
<li>Four</li>
</ol>
CSS:
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
.newList:before{
content: counter(item) "a " ;
}
li:before {
display: inline-block;
content: counter(item) ;
counter-increment: item;
width: 2em;
margin-left: -2em;
}
Check Fiddle
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments