➢CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document.
To work with CSS counters we will use the following properties:
➢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) ": ";
}
➢The following example creates one counter for the page (section) and one counter for each <h1< element (subsection). The "section" counter will be counted for each <h1> element with "Section <value of the section counter>.", and the "subsection" counter will be counted for each <h2> element with "<value of the section counter>.<value of the subsection counter>":
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) " ";
}
