Простые элементы списка с отметками

Question

Я пытаюсь создать список, который имеет галочки рядом с элементами списка. Поэтому замените текстовое украшение на png-изображение галочки. В настоящее время я не могу отобразить галочку. Вот код:

<ul class="masterList"> 
    <li>Quickly organize small items and prep for dusting</li> 
    <li>Quickly organize small items and prep for dusting</li> 
    <li>Quickly organize small items and prep for dusting</li> 
</ul> 

.masterlist li::before 
{ 
    background-image: url("https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-128.png"); 
    content: ""; 
    display: block; 
    height: 31px; 
    left: 0; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 32px; 
} 

ссылка codepen: http://codepen.io/anon/pen/KNMgea

Answer 1

Начните с этого, а затем добавить другие атрибуты:

HTML

<ul> 
    <li>Quickly organize small items and prep for dusting</li> 
    <li>Quickly organize small items and prep for dusting</li> 
    <li>Quickly organize small items and prep for dusting</li> 
</ul> 

CSS

ul 
{ 
    list-style-image: url('http://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-128.png'); 
}