环绕 :before 元素

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.