What Are CSS Counters

Abhishek Yadav
2y
2.7k
0
3
25
Blog

CSS counters are "variables" maintained through CSS whose values may be incremented through CSS rules (to song how often they're used). Counters can help you regulate the arrival of content material primarily based totally on its placement withinside the document.

h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: section;
}
h1 {
    counter-reset: subsection;
}
h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}
h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>Abhishek Yadav:</h1>
<h2>.net devloper</h2>
<h2>front end devloper</h2>
<h2>Android devloper</h2>
<h2>loves to write tech blogs</h2>

<p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>