编号的圆形背景

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，加入的高度和宽度的元件导致文本流动到第二行。我将.rounded-list a宽度更改为150px以解决此问题。