<h1>Title</h1>
<hr>

<h2>Demos</h2>
<h3>Demo One</h3>
<h3>Demo Two</h3>

<h2>Features</h2>
<h3>Responsive</h3>
<h3>Flexible</h3>
<h3>Fast</h3>

<h2>Screenshots</h2>
h1 {
  // reset h2 headings counter.
  counter-reset: h2Counter;
}

@for $i from 2 through 3 {
  h#{$i} {
    // increment current headings counter.
    counter-increment: h#{$i}Counter;
    // reset next level headings counter.
    counter-reset: h#{$i + 1}Counter;
    &::before {
      display: inline;
      @if $i == 2 {
        content: counter(h2Counter) ".\0000a0";
      } @else if $i == 3 {
        content: counter(h2Counter) "." counter(h3Counter) ".\0000a0";
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.