Search code examples
htmltableofcontents

Creating table of contents in html

Is it possible to create an ordered list like the following? I like this for a table of contents I'm creating.

  1. Into
  2. Section1
    2.1 SubSection1
    2.2 SubSection2
  3. Section2
    .....

I have the following but each subsection restarts from 1.

<ol>
    <li>
        <a href="#Lnk"></a>
    </li>
    <li>
        <a href="#Lnk"></a>
    </li>
    <ol>
        <li>
            <a href="#Lnk"></a>
        </li>
        <li>
            <a href="#Lnk"></a>
        </li>
    </ol>
</ol>

Thanks

Solution

  • 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.