Counter Resets

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

Thumbnail
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 Codepen.io
Copyright shalinguyen ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <p>Counter reset example: <a href="http://docs.webplatform.org/wiki/css/properties/counter-reset">http://docs.webplatform.org/wiki/css/properties/counter-reset</a></p>

<h1>A header.</h1>

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

<hr> 
  
<h1>Another header.</h1>

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

</body>

</html>

/*Downloaded from https://www.codeseek.co/shalinguyen/counter-resets-aAkGx */
/*
 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) " ";
}

Comments