Using CSS3 Number circles as bullet points WordPress

• SOLVED

Hi Guys

On this page I am using css3 to create these nice numbered circles

http://184.173.206.192/~swo/spa-balance.com/?page_id=12

What is the best way to use them as bullets <li></li> (is it possible?)

I want to line the paragraphs up along these redlines

http://screencast.com/t/Wslh8thtQQYm

this is the code i'm using for the numbers


.numberCircle {
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
behavior: url(PIE.htc);

width: 30px;
height: 30px;
padding: 8px;

background: #649BA1;
border: 2px solid #649BA1;
color: #fff;
text-align: center;

font: 28px Arial, sans-serif;
float: left;
margin-right: 10px;
}

Answers (3)

2013-05-07

Daniel Yoen answers:

try this :

ol {
counter-reset:li;
margin-left:0;
padding-left:0;
}
ol > li {
list-style:none;
}
ol > li:before {
content:counter(li);
counter-increment:li;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
display: block;
float: left;
width: 30px;
height: 30px;
padding: 8px;
line-height: 30px;

background: #649BA1;
border: 2px solid #649BA1;
color: #fff;
text-align: center;

font-weight:bold;
}


hope this help :-)

---

Steve Watson comments:

Hey Daniel

Its close, can you firebug it and let me know where i'm going wrong?

the main issue is the left alignment and the numbering

http://184.173.206.192/~swo/spa-balance.com/?page_id=12

thanks
steve

---

Daniel Yoen comments:

I have not seen the script in your page :-)

demo : http://jsfiddle.net/nTjcM/

---

Daniel Yoen comments:

if I apply it on your site :