Html 编号的圆形背景

我有一个列表，每个数字都有样式。你应该关注的是数字的背景。现在它将以数字的形式出现。如何使背景更圆，理想情况下是一个平滑的圆？这是我的名片

CSS:

---

默认情况下，伪元素是内联元素，不能设置其宽度或高度。将显示更改为

内联块

：

.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;
} 

---

注意，在JSFIDLE中，向元素添加高度和宽度会导致文本流到第二行。我将

.rounded list a

宽度更改为150px以解决此问题。

谢谢。这就形成了一个圆圈。但是，它将使文本更改行，而不是将

li

的所有文本保持在同一行中。你拉小提琴的时候没有得到那个结果吗？我需要文本不要换行。@gsamaras Lol，我对此没有异议：P很高兴我能帮忙：）

.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;
}