CSS Counters

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h3>Contents</h3>
    <ul>
      <li>Planting
        <ul>
          <li>What is dirt</li>  
          <li>How to shovel</li>
          <li>When to stop</li>
        </ul>
      </li>
      <li>Watering
        <ul>
          <li>When</li>  
          <li>How</li>
          <li>Why</li>
        </ul>
      </li>
      <li>Harvesting</li>
    </ul>
  </body>

</html>

// Code goes here

html {
  font-size: 1.8em;
}

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

ul li::before {
  counter-increment: chapter;
  content: "Chapter " counter(chapter) ": ";
  display: inline-block;
  border: 1px solid gray;
  border-radius: 5px;
  background: gray;
  color: white;
  padding: .2em;
  margin: .2em .5em;
}

li > ul {
  counter-reset: section;
}

li > ul li::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}