With CSS counters, you can display dynamic, incremental values for anything you want, without being limited to using HTML lists (<ul> or <ol>). This means that you can create dynamic and customized content that is both visually appealing and functional.
Unlike traditional lists, which can only be added at the beginning of content, CSS counters give you the ability to insert counters anywhere within your content.
The following properties will be used when working with CSS counters:
| CSS Property | Description |
|---|---|
| resets a counter to an initial value, initial value = 0 |
| increase a counter by a specified value |
| returns the value of the specific counter |
| sets the specific counter to a given value. |
This tutorial will guide you step-by-step through the process of creating a CSS counter with examples. You’ll also learn how to create a CSS dynamic counter and gain a solid understanding of how it works in just 3 steps. Let’s get started!
Step 1: Create or reset a Counter
To use a CSS counter, you first need to define it. You can define a counter using the “counter-reset” property in your CSS code.
For example, let’s create a counter and name it “uipencil-counter“:
<!DOCTYPE html>
<html>
<head>
<style>
.counter-wrap{
counter-reset: uipencil-counter;
}
</style>
</head>
<body>
<div class="counter-wrap">
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
</div>
</body>
</html>
This will create a counter called “uipencil-counter“.
Step 2: Increment the Counter
Once you’ve created a counter, you can increment it using the “counter-increment” property, for example:
<!DOCTYPE html>
<html>
<head>
<style>
.counter-wrap{
counter-reset: uipencil-counter;
}
.item {
counter-increment: uipencil-counter;
}
</style>
</head>
<body>
<div class="counter-wrap">
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
</div>
</body>
</html>
In this example, the value of the “uipencil-counter” counter will increase by 1 each time a list item is generated.
Note 1:
Initially, if we leave the increament value unset, it will default to 1. To specify a custom increment value, let’s say we want to increase the count by 3 for each item, we can set the CSS property to “counter-increment: uipencil-counter 3;“
This will result in a list where each item is numbered by 3: 3, 6, 9, 12, and so on. You can adjust the increment value to any number you want, depending on your needs.
Note 2:
To generate a decremental list, we can set the increment count to a negative value, for example, “counter-increment: uipencil-counter -1;“
Step 3: Display the Counter
Finally, the counter is all ready and you can display the counter using the “content” property with the “counter()” function.
For example, if you want to insert the counter value in the middle of the content for each list item:
<!DOCTYPE html>
<html>
<head>
<style>
.counter-wrap{
counter-reset: uipencil-counter;
}
.item {
counter-increment: uipencil-counter;
}
.item span{
position: relative;
padding-left: 30px;
}
.item span::before {
content: "00" counter(uipencil-counter);
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div class="counter-wrap">
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
</div>
</body>
</html>
In this example, we customize the counter value in a zero-leading format
Result Output
Others: counter-set
The counter-set property allows you to set the value of a counter to a specific number. This is useful when you want to start counting from a number other than 1 or when you need to reset a counter to a certain value. here’s the example:
<!DOCTYPE html>
<html>
<head>
<style>
.counter-wrap{
counter-reset: uipencil-counter;
}
.item {
counter-increment: uipencil-counter;
}
.item span{
position: relative;
padding-left: 30px;
}
.item:nth-of-type(2) span::before {
counter-set: uipencil-counter 5;
content: "00" counter(uipencil-counter);
color: red;
}
.item span::before {
content: "00" counter(uipencil-counter);
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div class="counter-wrap">
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
</div>
</body>
</html>
In this example, we have applied “counter-set: uipencil-counter 5;” to the second item (refer to the highlighted row). This means that the counter has been set to 5 from there and will start counting from “5” for subsequent items.”
Result output
Note: (by March 2023) counter-set is having limited support in web and mobile Safari
Others: Nested Counter
A counter that is contained within another counter is called a nested counter. These counters are utilized to generate multiple levels of counting.
<!DOCTYPE html>
<html>
<head>
<style>
.counter-wrap{
counter-reset: uipencil-counter;
}
.item {
counter-increment: uipencil-counter;
counter-reset: uipencil-counter-sub;
}
.item_sub {
counter-increment: uipencil-counter-sub;
padding-left: 10px;
}
.item span,
.item_sub span{
position: relative;
padding-left: 30px;
}
.item span::before {
content: "00" counter(uipencil-counter);
position: absolute;
left: 0;
}
.item_sub span::before {
content: "00" counter(uipencil-counter) "." counter(uipencil-counter-sub);
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div class="counter-wrap">
<div class="item">Item <span></span> - this is the way</div>
<div class="item_sub">sub item - <span></span></div>
<div class="item_sub">sub item - <span></span></div>
<div class="item_sub">sub item - <span></span></div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item_sub">sub item - <span></span></div>
<div class="item_sub">sub item - <span></span></div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item">Item <span></span> - this is the way</div>
<div class="item_sub">sub item - <span></span></div>
<div class="item">Item <span></span> - this is the way</div>
</div>
</body>
</html>
Result Output
Browser Compatibility
counter-reset,counter-incrementandcounter()are supported in most of the modern browserscounter-sethave limited support in Safari
 | | | | |  | | | | | | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera | Chrome Android | WebView Android | iOS Safari | Firefox Android | Opera Android | Samsung Internet | |
counter-reset | 2 | 12 | 1 | 3 | 9.2 | 18 | 4.4 | 1 | 25 | 10.1 | 1.0 |
counter-increment | 2 | 12 | 1 | 3 | 9.2 | 18 | 4.4 | 1 | 25 | 10.1 | 1.0 |
counter() | 1 | 12 | 1 | 3 | 9.2 | 18 | 4.4 | 1 | 4 | 10.1 | 1.0 |
counter-set | 85 | 85 | 68 |  | 71 | 85 | 85 | | 68 | 60 | 14.0 |
sources:
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset#browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment#browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/counter#browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set#browser_compatibility
Summary
In conclusion, CSS counters offer a powerful way to create customized and dynamic content on your webpage. It also allow you to have more control and flexibility in styling your counter with CSS. By using CSS counters in your projects, you can add unique and personalized touches to your webpage that will captivate your audience. Happy coding! 
ui pencil 
Leave a Reply