Is there a way to create multi-level lists like these using only HTML5 and CSS?
I would like to create lists like these using HTML5 and CSS :
1 First
1.1 Indent 1
1.2 Indent 2
2 Second
2.1 Indent 1
2.2 Indent 2
2.2.1 More depth
I've checked several tutorials on ordered lists, but it seems that the tag <ol>
doesn't have the ability to do this. Is it possible to use HTML5 and CSS ?
+3
source to share
1 answer
You can use a pseudo element before
to achieve this:
Html
<ul class="numeric">
<li>First
<ul>
<li>Indent </li>
<li>Indent </li>
</ul>
</li>
<li>Second
<ul>
<li>Indent</li>
<li>Indent</li>
</ul>
</li>
<li>Third
<ul>
<li>Indent</li>
<li>Indent</li>
<li>Indent</li>
<li>Indent</li>
</ul>
</li>
<li>Fourth
<ul>
<li>Indent</li>
<li>Indent</li>
</ul>
</li>
<li>Five</li>
CSS
ul.numeric { counter-reset:section; list-style-type:none; }
ul.numeric li { list-style-type:none; }
ul.numeric li ul { counter-reset:subsection; }
ul.numeric li:before{
counter-increment:section;
content:counter(section) ". ";
}
ul.numeric li ul li:before {
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
Literature:
+5
source to share