How to style style ordered list numbers?

Today I would like to show how to add background-color, border-radius and color to ordered list. if you make your look at nice on your website so it easy way to to like below: 1. HTML <ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> 1. CSS <style> body { counter-reset: item; } ol { list-style: none; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; } </style> Working Demo