Dynamic number creation for nested segments

Hi Everyone,

Now we have one interesting topic. This is very useful for creating the index page for the book or document or something else.
Another interesting point is here we didn't write any javascript code for getting this output

HTML:

   <ul>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment
            <ul>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
            </ul>
          </li>
        </ul>
      </li>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
        </ul>
      </li>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment
            <ul>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment</li>
            </ul>
          </li>
        </ul>
      </li>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment
            <ul>
              <li>Sub-Sub-Segment</li>
              <li>Sub-Sub-Segment
                <ul>
                  <li>Sub-Sub-Sub-Segment</li>
                  <li>Sub-Sub-Sub-Segment</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li> Segment
        <ul>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
          <li>Sub-Segment</li>
        </ul>
      </li>
    </ul>

CSS:

    ul {
      list-style: none;
      counter-reset: my-counter;
    }

    ul li {
      counter-increment: my-counter;
    }

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

Here we are writting the ul inside one li element. That's ok. How it's working?🤔

first we need to know the following three properties.

• counter-reset
• counter-increment
• counters

Here our counter name is my-counter

counter-reset:
This property accepts the following values:
1) The name of the counter to reset.
2) The starting value to on each occurrence of the element.
The default starting value is 0.

counter-increment:
This property accepts the following values:
1) The name of the counter to increment.
2) The value to add to the counter. The default value is 1.
Note: The value is increamented before rendering. That's why we are giving the counter-reset value as 0 instead of 1.

counters:
The CSS function enables nested counters, returning a concatenated string representing the current values of the named counters.

It accepts the following three values:
1) The name of the counter
2) The string to add. In our case this value is .(ex: 1.1, 2.1)
3) Style - Maybe a numeric, alphabetic, or something else

Here the content property as counters(my-counter, ".") ") ".
Here our counters will do a very big role. That is It returns the first level li segements(segements) as 1,2,3,etc.. and second level li segements as (Sub-segements) as 1.1, 1.2, 2.1, 2.2, etc.. and so on. Here the counters function is used as the value of the content property in li element before pseudo-class.

content property has the values of counters function for numbers as well as the string value of ) for getting the output as 1), 1.2), 1.2.3) instead of 1, 1.2, 1.2.3.

What are you waiting for? That's all. Now we got what we want.😍

Thanks for reading this. I hope you learned something.

Note:

We can also getting the output as a, a.a or I, I.I by setting the css style value of counter function