Counter Resets

In this example below you will see how to do a Counter Resets with some HTML / CSS and Javascript

This awesome code was written by shalinguyen, you can see more from this user in the personal repository.
You can find the original code on
Copyright shalinguyen ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Counter Resets</title>
      <link rel="stylesheet" href="css/style.css">



  <p>Counter reset example: <a href=""></a></p>

<h1>A header.</h1>

<h2>A subheader.</h2>
<h2>Another subheader.</h2>
<h2>A third subheader.</h2>

<h1>Another header.</h1>

<h2>A subheader.</h2>
<h2>A second subheader.</h2>



/*Downloaded from */
 Using the CSS 'counter-reset' property.

h1 {
	counter-increment: header;
	counter-reset: subheader;

h1:before {
 	content: counter(header) ". ";

h2 {
	counter-increment: subheader;

h2:before {
	content: counter(header) "." counter(subheader) " ";