CSS counters function nested list example (Interactive Example)

<!doctype html>
<title>Example</title>
<style>
  ul {
    list-style: none;
    counter-reset: nestedCounter;
  }  
  ul li {
    counter-increment: nestedCounter;
    line-height: 1.4;
  }  
  ul li:before {
    content: counters(nestedCounter, ".") " - ";
    font-weight: bold;
  }
</style>

<ul>
  <li>Fruit
    <ul>
      <li>Apples
        <ul>
          <li>Green ones</li>
          <li>Red ones</li>
        </ul>
      </li>
      <li>Oranges
        <ul>
          <li>Small ones</li>
          <li>Big ones</li>
        </ul>
      </li>
    </ul>  
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots
        <ul>
          <li>Orange ones</li>
          <li>Purple ones</li>
        </ul>
      </li>
      <li>Potatoes
        <ul>
          <li>Fresh ones</li>
          <li>Rotten ones</li>
        </ul>
      </li>
    </ul>  
  </li>
  <li>Fish
    <ul>
      <li>Big Ones
        <ul>
          <li>Mekong Catfish</li>
        </ul>
      </li>
      <li>Small Ones
        <ul>
          <li>Piranha</li>
          <li>Gold Fish</li>
          <li>Black Molly</li>
        </ul>
      </li>
    </ul>  
  </li>
</ul>