Question

我有一个列表，每个号码都有样式。你应该关注的是数字的背景。现在它将采用数字的形状。如何使这个背景更圆形，理想情况下是一个漂亮的光滑圆圈？这是我的Fiddle。

CSS：

.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1em;
    top: 64%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

Answer 1

默认情况下，伪元素是一个内联元素，您无法设置其宽度或高度。将显示更改为inline-block：

.rounded-list a:before {
    display:inline-block;
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1em;
    top: 64%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

<强> JSFiddle
请注意，在jsfiddle中，向元素添加高度和宽度会导致文本流向第二行。我将.rounded-list a宽度更改为150px以解决此问题。

编号圆的背景

1 个答案: