Page 133 - CSS

Applying roman numerals styling to the counter output

CSS

body {
counter-reset: item-counter;
}

.item {
counter-increment: item-counter;
}

.item:before {
content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style
the output would be in roman numbers */
}

HTML

<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>

In the above example, the counter's output would be displayed as I, II, III (roman numbers) instead
of the usual 1, 2, 3 as the developer has explicitly specified the counter's style.

Number each item using CSS Counter

CSS

body {
counter-reset: item-counter; /* create the counter */
}
.item {
counter-increment: item-counter; /* increment the counter every time an element with class
"item" is encountered */
}
.item-header:before {
content: counter(item-counter) ". "; /* print the value of the counter before the header and
append a "." to it */
}

/* just for demo */

.item {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
.item-header {

https://riptutorial.com/ 111