Круглый фон нумерации

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 до 150 пикселей, чтобы исправить это.