Can you style ordered list numbers?

css, html, html-lists, sprite

Solution

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>

Problem

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.png')}; ol li:nth-child(2) {list-style-image:url('2.png');} etc... ``` Is there a simpler solution?

Original source

Related problems