Counter Resets

Tutorials of (Counter resets) by Shali nguyen

<!DOCTYPE html>
<html >
<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/ */
/*
 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) " ";
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Counter Resets ) is write by Shali Nguyen, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Shali Nguyen