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. CSS


    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;



Working Demo


Popular posts from this blog

Set limit wp_nav_menu

Conut document have children that are show in navigation