← #99 Center an element vertically and horizontally
#100

Style index numbers of list items

Topics: CSS

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);
}

Demo

More

Fix a typo or suggest an improvement
#101 View print stylesheets with Chrome DevTools