Как отступать вторая строка в списках, когда у пули есть фон?

Question

У меня есть неупорядоченный список, где пули создаются с помощью FontAwesome, немного фона и радиуса границы.

Я хочу, чтобы вторая строка текста была выровнена под первым, а не под пулей.

li::before { 
    display: table-cell; 
    padding-right: .3em; 
    content: "\f00c"; 
    float: left; 
    margin: 0 9px 0 0; 
    font: 10px 'FontAwesome'; 
    width: 20px; 
    height: 20px; 
    position: relative; 
    background: #3498db; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    text-align: center; 
    line-height: 20px; 
    color: #FFF; 
} 

Как-то float: left кажется, "конфликт" с display: table-cell.

Любые идеи о том, как заставить это работать? ->jsfiddle

Answer 1

Использование position:absolute для :before и padding-left для <li>

li { 
    position:relative; 
    padding-left:32px; 
} 

li::before{ 
    position:absolute; 
    top:0; 
    left:0; 
} 

DEMO

Answer 2

Использование position:absolute для :before и padding-left для <li>, но не использовать left или top. Вместо этого используйте поля.

http://jsfiddle.net/semencov/vvLtj43g/