Hello to all mini-learn friends! Today we want to talk about a very interesting and useful topic called "CSS Counter Styles". These features allow us to easily and without needing to use JavaScript, create continuous numbered and ordered lists. These capabilities are particularly useful for designing websites that have many lists, such as blogs, numbered lists, and various ordered items, which are very useful. So stay with me!
In fact, one of the features of CSS that we might have paid less attention to is the ability to create and use counters in lists. By using CSS Counters, we can easily have more control over the display of lists and even style them. Assume you want to show a list of tasks that need to be done with a numbered list; with CSS Counters, this task becomes easily achievable.
Creating a counter in CSS includes using properties like counter-reset and counter-increment. Additionally, you can use the counter() function to display the counter within the CSS content. It is interesting that you can create variables to display counters in different styles, for example using letters instead of numbers.
To apply CSS Counter Styles, you must first consider that these features are only applicable to list items or any other element that somehow belongs to a list. Therefore, you should ensure that the use is appropriate for these features before applying them. In the continuation, we will further explore a practical example of this topic.
<style>
ul {
counter-reset: my-counter;
}
li {
counter-increment: my-counter;
}
li::before {
content: counter(my-counter) ". ";
}
</style>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<style>
With this tag, we can start adding CSS to the HTML document.
ul { counter-reset: my-counter; }
This line initializes a counter named my-counter for the ul element.
li { counter-increment: my-counter; }
Every time a new li is added, the counter my-counter increases by one.
li::before { content: counter(my-counter) ". "; }
This line displays the value of the counter before the actual content of the li.
<ul> and </ul>
These tags indicate the start and end of an unordered list.
<li>First Item</li>
This line indicates an item in the list with the title "First Item".
And in this manner for the other items in the list.