What’s “counter-reset”?
The “counter-reset” property resets a counter to a given value and the counter's value is increased or decreased using the “counter-increment” CSS propertyWhat’s “counter-increment”?
The counter-increment CSS property increases or decreases the value of a CSS counter
by a given value.What’s “counter”?
The ”counter()” css function returns a string representing the current value of the named counter.Example
ol {
display:flex;
padding:0;
counter-reset:order 0;
}
li {
list-style-type:none;
}
ol li::before {
counter-increment:order 1;
content:counter(order);
display:flex;
justify-content:center;
align-items:center;
width:var(--circle-width);
aspect-ratio:1/1;
border-radius:50%;
border:var(--circle-border-width) solid black;
font-size:var(--circle-font-size);
margin:0 auto var(--circle-bottom-margin) auto;
background-color:white;
}
