How do I create a summary in the text with some WYSIWYG?

Question

I would like to create a summary:

1 - Titulo Tal
1.1 - Subtitulo
1.1.2 - outro

2 - Outro titulo
2.1 - subtitulo
etc...

I would like something automatic, but I have no idea where to start. Could someone give me an idea or direction for me to study and try to do?

Answer 1

With HTML like this:

<ul>
 <li>Item</li>
 <li>Item</li>
 <li>Item
<ul>
  <li>Item</li>
  <li>Item</li>
<ul>
</li>
<ul>

CSS will look like this:

ul {
    counter-reset: nomeContador;
}
li:before {
    counter-increment: nomeContador;
    content : counters(nomeContador, ".") " ";
}

And with the counter css the result will look like this:

1 Item
2 Item
3 Item
3.1 Item
3.2 Item