带有复选标记的简单列表项

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');
}