編號的圓形背景

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以解決此問題。