Counter increment

Counter increment using css only

by vaheed akhtar

HTML

<h3 class="sec1">First Heading</h3>
<h4>Inner one</h4>
<h4>Inner Two</h4>
<h4>Inner Three</h4>

<h3 class="sec2">Second Heading</h3>
<h4>Inner Second</h4>
<h4>Inner Third</h4>
<h4>Inner Four</h4>
<h4>Inner Five</h4>

CSS

h3 {
  counter-increment: num;
  counter-reset: sub;
  font-size: 20px;
  color: red;
}

h4 {
  counter-increment: sub 1;
}

h3::before {
  content: counter(num) " ";
}

h4::before {
  content: counter(num) "." counter(sub) " ";
}