编号的圆形背景

Question

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

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 以解决此问题。