geometry - 围绕:before element圈

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.