Is there a way to create multi-level lists like these using HTML5 and CSS only?

Question

I would like to create lists like these using HTML5 and CSS only:

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 multiple tutorials on ordered lists but it seems that the <ol> tag does not have the option to do so. Is it possible using HTML5 and CSS?

Is the automatic numbering of those list what your question is actually about? If so, check https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters — CBroe, Sep 04 '14 at 14:45
See http://stackoverflow.com/questions/2729927/number-nested-ordered-lists-in-html — Aibrean, Sep 04 '14 at 14:45

Alex Char · Accepted Answer · 2014-09-04T14:55:25.617

5

You can use before pseudo-element to achieve that:

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) " ";
}

fiddle

References:

CSS counter-reset Property

edited Sep 04 '14 at 14:55

answered Sep 04 '14 at 14:49

Alex Char

32,295
8
49
69

Is it supposed to work if I set the element.style by hand on each element? I tried and it does not work. Your example works using an external css file though. – Adam Arold Sep 05 '14 at 09:58
Nope i didn't use an external css file.. I use pure css. See my fiddle example. – Alex Char Sep 05 '14 at 10:00
But [this](http://jsfiddle.net/tpqe74ov/) does not work. – Adam Arold Sep 05 '14 at 10:03
of course it doesn't. My answer based using `:before` pseudo-element. Take a look here https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters and here https://developer.mozilla.org/en-US/docs/Web/CSS/::before and here http://stackoverflow.com/questions/14141374/using-css-before-and-after-pseudo-elements-with-inline-css – Alex Char Sep 05 '14 at 10:06
Can I use `:before` in an inline styling? – Adam Arold Sep 05 '14 at 10:10
Nope.. Take a look in last link – Alex Char Sep 05 '14 at 10:10
Okey, thanks for the info. – Adam Arold Sep 05 '14 at 10:11
You are welcome. You can achieve this if you use css i provide. Not inline of course :) – Alex Char Sep 05 '14 at 10:13

Is there a way to create multi-level lists like these using HTML5 and CSS only?

1 Answers1