body {
    counter-reset: h1; /* Start h1 at 0 when the page loads */
  }
  
  h1 {
    counter-reset: h2; /* Reset h2 every time you get a new h1 */
  }
  
  h2 {
    counter-reset: h3; /* Reset h3 every time you get a new h2 */
  }
  
  h1::before {
    counter-increment: h1;
    content: counter(h1) ". ";
  }
  
  h2::before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) " ";
  }
  
  h3::before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) " ";
  }

.start-h1-1 { counter-reset: h1 0; }
.start-h1-2 { counter-reset: h1 1; }
.start-h1-3 { counter-reset: h1 2; }
.start-h1-4 { counter-reset: h1 3; }

.no-heading-numbers h1::before,
.no-heading-numbers h2::before,
.no-heading-numbers h3::before,
.no-heading-numbers h4::before {
  content: none;
  counter-increment: none;
}