Can you style ordered list numbers?

Question

I\'m trying to style the numbers in a ordered list, I\'d like to add background-color, border-radius and color so they match the design I\'m working from:

Answer 1

You can do this using CSS counters, in conjunction with the :before pseudo element:

 ol {
   list-style: none;
   counter-reset: item;
 }
 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;
 }

  
item
  
item
  
item
  
item