Круг вокруг: перед тем элементом

Question

Здравствуйте, я пытаюсь выяснить, один и тот же вопрос, что был задан в этой теме How to use CSS to surround a number with a circle?

Однако - каждый раз, когда я делаю это, форма становится овальной, независимо, если добавить ширина/высота или нет ...

Я создал jsfiddle здесь http://jsfiddle.net/dDuFv/

<ul class="numberCircle"> 
    <li>testing</li> 
    <li>testing</li> 
    <li>testing</li> 
</ul> 

CSS

.numberCircle { list-style-type:none; font-size:18px; } 
.numberCircle li { margin:20px;} 
.numberCircle li:before { 
    border-radius:100%; 
    counter-increment: section; 
    content:counter(section); 
    background: #f1562c; 
    color:#fff; 
    padding:2px; 
    border:none; 
    text-align: center; 
} 

но это просто не работает!

Спасибо за помощь!

Answer 1

Дать display:inline-block; псевдокласс. Он должен работать.

Запись:

.numberCircle li:before { 
    width:20px; 
    display:inline-block; 
} 

Updated fiddle here.