HTML + CSS: Numbered list with numbers inside of circles

Question

I\'m trying to create an ordered list in CSS + HTML that looks like this:

I can\'t for the

Answer 1

I think I found out a solution for that. Your HTML code would be

   
First item
   
Second item

If you apply the following styles, it gets quite like a circle:

ol {margin-left:0; padding-left:0; counter-reset:item}
ol>li {margin-left:0; padding-left:0; counter-increment:item; list-style:none inside;margin-bottom:10px}
ol>li:before {
content:"(" counter(item) ")";
padding:3px 5px;
margin-right:0.5em;
background:#ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; 
}

I would then play around with paddings and radius in order to make it appear as a circle