Style index numbers of list items

By default, an ordered list prefixes each item with its index number. Since there is no actual element or CSS property that represents the index number, we can't add custom styles for it directly.

The approach is that we hide the original index numbers, and number the items ourselves. The first task is quite easy:

ol {
    list-style-type: none;
}

The index numbers start from zero, and increase by one after each item. It gives us a hint that we can use a CSS counter to represent the indices:

ol {
    counter-reset: ol-counter;
}
li {
    counter-increment: ol-counter;
}

Finally, use the `::before` pseudo element to display the number:

li::before {
    content: counter(ol-counter);
}