Ordered nested list counters

The list numbers are automatically generated.

<ol>
  <li>Primary 1
    <ol>
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ol>
  </li>
  <li>Primary 2
    <ol>
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ol>
  </li>
</ol>

ol {
  counter-reset: section;
  list-style-type: none;
  padding: 0;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
  color: #aaa;
  width: 2rem;
  display: inline-block;
}

Sources

You saw it first on CSSPoo.