使用CSS ::before在列表链接前添加小图标

Question

问题已经很清楚了，但是我有一个列表项，我想在它们之前放一个简单的菱形图标，但是当我尝试使用::before时，它会把图像放在上面而不是同一行，我似乎无法找到如何在同一行上将其正确放置在列表符号之前。

就像我说的，图像只是一个小的菱形，大小为5px x 5px。

.list-menu::before {
  content: url('../images/menu-icons/image-before.png');
}

<div class="sb-slidebar sb-left sb-style-push">
  <nav>
    <ul>
      <li class="list-menu"><a href="#">Home</a></li>
    </ul>
  </nav>
</div>

- Bob

---

改变<li>元素本身的图标怎么样？ - T J

Answer 1

这里根本不需要使用::before伪元素。你只需使用背景图像即可：

.list-menu {
  background-image: url('http://placehold.it/16x16');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px; /* Adjust according to image size to push text across. */
}

<div class="sb-slidebar sb-left sb-style-push">
 <nav>
  <ul>
   <li class="list-menu"><a href="#">Home</a></li>
  </ul>
 </nav>
</div>

- James Donnelly

---

谢谢！你能解释一下我应该在什么情况下使用:before和:after吗？ - Bob

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - James Donnelly

但是如果您想在不同的元素上执行此操作呢？比如说，一个 <p> 元素。 - TheRealChx101

@TheRealChx101，你可以使用相同的方法。 - James Donnelly

@JamesDonnelly 谢谢。我已经想通了。我之前没有好好看它。 - TheRealChx101

Answer 2

好的，list-style-image就是为此而生。

自IE 4.0以来就支持了。我想这应该足够了。

ul {
  list-style-image: url('http://placehold.it/12x12');
}

<ul>
  <li> Text content </li>
  <li> Text content </li>
  <li> Text content </li>
</ul>

- GuCier

Answer 3

答案2022

现在你可以使用::marker伪元素

li::marker {
  content: '  '
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

- dippas