Lists can be classified as ordered lists and unordered lists.
In ordered lists,CSS can be used to mark the list items with alphabet and numbers.
CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules
CSS counters variable values can be incremented by CSS rules.
CSS counters 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
CSS counter first created with counter-reset.
| Property |
Description |
| content |
Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment |
Used to increments one or more counter values |
| counter-reset |
Used to creates or resets one or more counters |
Example : Counters / List Counters
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h3 {
counter-reset: subsection;
}
h3::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h4::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h2>Programming</h2>
<h3>Java script</h3>
<h4>JQuery</h4>
<h4>React</h4>
<h4>Angular</h4>
<h3>Server side</h3>
<h4>PHP</h4>
<h4>Asp</h4>
<h4>Node.js</h4>
</body>
</html>
When the above code is compiled , it produces the following result.
