CSS Counters

CSS Counters is a feature in CSS that allows you to increment or decrement a value each time a specified element is encountered in the document's structure. This can be useful for creating lists with a custom style or numbering elements in a specific order.

To use counters, you first need to define a counter in your CSS using the counter-reset property. This sets the initial value of the counter. You can then use the counter-increment property to increment the counter each time the specified element is encountered.

Let's look at an example to see how counters work:

/* Define a counter named 'list-counter' and set its initial value to 1 */
ol {
  counter-reset: list-counter;
}
/* Increment the 'list-counter' each time an 'li' element is encountered */
li {
  counter-increment: list-counter;
}
/* Display the value of the 'list-counter' before each 'li' element */
li::before {
  content: counter(list-counter) ". ";
}

In this example, we have created a numbered list using the ol and li elements. The counter-reset property is used to initialize a counter named 'list-counter' with an initial value of 1. The counter-increment property is then used to increment the 'list-counter' each time an li element is encountered. Lastly, the ::before pseudo-element is used to display the value of the 'list-counter' before each li element, creating a custom numbered list.

Here is an example of how the list would be displayed:

This is just one example of how you can use CSS Counters to customize the styling of your lists or elements. Experiment with different properties and values to achieve the desired result for your project.