CSS Counter

The CSS Counters let you adjust the appearance of content based on its placement in the document(file).

Automatic Numbering With Counters:

CSS counters are like “variables”.

Work with CSS counters:

counter-reset – Creates or resets a counter.
counter-increment – Increments a counter value.
content – Inserts generated content.
counter() or counters() function – Adds the value of a counter to an element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
 counter-reset: section;
}

h2::before {
 counter-increment: section;
 content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Using CSS Counters:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>

</body>
</html>

OUTPUT:

CSS Counter

Nesting Counters:

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>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

OUTPUT:

CSS Counter

Different levels of nested counters:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
 counter-reset: section;
 list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
 <li>item</li>
 <li>item  
 <ol>
   <li>item</li>
   <li>item</li>
   <li>item
   <ol>
     <li>item</li>
     <li>item</li>
     <li>item</li>
   </ol>
   </li>
   <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
 </ol>

<ol>
 <li>item</li>
 <li>item</li>
</ol>

</body>
</html>

OUTPUT:

CSS Counter