环绕 :before 元素

Question

您好，我正在尝试找出与此线程中提出的问题相同的问题如何使用 CSS 用圆圈包围数字？

然而 - 每次我这样做，形状都会变成椭圆形，无论我是否添加宽度/高度......

我在这里创建了一个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;
}

在这里更新了小提琴。