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:

I guess it's not possible and I'll have to use different images for each number i.e.

ol li:first-child {list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');} 
etc...

Is there a simpler solution?

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;
 }

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>