<h1>Title 1</h1>
<ol>
  <li>List 1
    <ol>
      <li>Sublist - 1</li>
      <li>Sublist - 2</li>
      <li>Sublist - 3</li>
    </ol>
  </li>
  <li>List 2
    <ol>
      <li>Sublist - 1</li>
      <li>Sublist - 2</li>
      <li>Sublist - 3</li>
    </ol>
  </li>
  <li>List 3
    <ol>
      <li>Sublist - 1</li>
      <li>Sublist - 2</li>
      <li>Sublist - 3</li>
      <li>Sublist - 4</li>
      <li>Sublist - 5</li>
      <li>Sublist - 6</li>
    </ol>
  </li>
</ol>
<h1>Title 2</h1>
<ol start="4">
  <li>List 1
    <ol>
      <li>Sublist - 1</li>
      <li>Sublist - 2</li>
      <li>Sublist - 3</li>
    </ol>
  </li>
  <li>List 2
    <ol>
      <li>Sublist - 1</li>
      <li>Sublist - 2</li>
      <li>Sublist - 3</li>
    </ol>
  </li>
</ol>
ol { counter-reset: mynum; list-style-type: none; }
ol li::before  {
  content: counter(mynum) ". ";
  counter-increment: mynum;
  font-weight: bold;
  font-size: 10pt;
  color: #ccc;
}
ol[start="4"] {
   counter-reset: lis;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.