CSS COUNTERS

CSS counters are “variables” prepared by CSS whose values can be incremented by CSS rules to track how many times they are done. Counters let you adjust the presentation of content based on its arrangement in the document.

AUTOMATIC NUMBERING WITH COUNTERS

CSS counters are like “variables”. The mutable values can be incremented by CSS rules. To work with CSS counters we will use the following properties. The Creates a counter for the page (in the body selector), then increments the counter value for each <h2> element and adds “Section <value of the counter>:” to the beginning of each <h2> element.

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

body {

counter-reset: section;

}

 

h2::before {

counter-increment: section;

content: “Section ” counter(section) “: “;

}

NESTING COUNTERS

Creates one counter for the page (section) and one counter for each <h1> element. The “section” counter will be counted for each <h1> element with “Section <value of the section counter>.”, and the “subsection” counter will be added for each <h2> element with “<value of the section counter>.<value of the subsection counter>”

A counter can also be useful to make planned lists because a new case of a counter is automatically created in minor factors.

EXAMPLE

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) ” “;

}