Automatic numbering using the counter() function in CSS

One pet peeve I have with lists is using list-style: decimal because it always places the numbers outside of the box. Recently though I learned you can replicate the decimal numbers using the counter() function in CSS.

First define the scope of your counter by reseting it.

ol {
    list-style: none;
    counter-reset: number;
}

Now tell the counter to increment by 1 for each list item.

ol li:before {
    counter-increment: number; 
}

Finally display the counter using a pseudo element combining it with a decimal.

ol li:before {
    content: counter(number) ". "; 
}