Posts

Showing posts from May 3, 2016

How to style style ordered list numbers?

Image
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