Alan Sutherland Alan Sutherland - 6 months ago 9
HTML Question

Can you style ordered list numbers?

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

enter image description here

I'm guessing it's not possible and that 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...


I was thinking I could use sprites to make this slightly better but is there any simpler solution?

SW4 SW4
Answer

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

 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;
 }
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>