CSS - counter-increment



The counter-increment property increments/decrements the value one or more CSS counters by a given value. Default increment is 1.

Possible Values

  • <custom-ident> − The name of a counter. The name can be any string value.

  • <integer> − (optional) Defines an increment for the named counter each time the element appears in the document. This increment can be zero, or even negative. If no integer is provided, the counter is incremented by one.

  • none − No increment is performed.

Syntax

counter-increment: <counter-name> <integer> ;

Applies to

All the HTML elements.

CSS counter-increment - <custom-ident> Value

Here is an example that demonstrates counter-increment

<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>XHTML Tutorial</h2>
   <h2>CSS Tutorial</h2> 
   <h1>Scripting tutorials</h1>
   <h2>JavaScript</h2>
   <h2>VBScript</h2>
</body>
</html> 

CSS counter-increment - <custom-ident> & <integer> Value

Here is an example that demonstrates counter-increment. The counter-increment property is applied to the h1::before selector. It increments the value of the head-counter counter by 2 for each h1 element.

<html>
<head>
<style>
   body {
      counter-reset: head-counter;
   }
   h1::before {
      counter-increment: head-counter 2;
      content: "Counter: " counter(head-counter) " - ";
   }
</style>
</head>
<body>
<h1>Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3</h1>
<h1>Heading 4</h1>
<p>The above example shows the usage of counter increment.<p></p>
</body>
</html>   
Advertisements