Html 使用CSS:：before在列表链接之前添加一个小图标

这个问题很好地解释了这一点，但我有一些列表项，我想在它们前面放一个简单的菱形图标，但当我尝试使用：：before时，它最终将图像放在上面而不是同一行，我似乎无法真正找到如何将其放在同一行的列表图标之前

就像我说的，图像只是一个小钻石，5px乘以5px

.list菜单：：之前{
内容：url（'../images/menu icons/image before.png'）；
}

这里根本不需要使用

：：before

伪元素。您可以只使用背景图像：

。列表菜单{
背景图像：url（'http://placehold.it/16x16');
背景位置：左中；
背景重复：无重复；
左侧填充：20px；/*根据图像大小进行调整，以将文本推送至另一侧*/
}

好吧，

列表样式图像

就是为了这个而制作的

从IE 4.0开始支持。我想这应该足够了

ul{
列表样式图像：url（'http://placehold.it/12x12');
}

文本内容
文本内容
文本内容

谢谢！你能解释一下我什么时候应该使用：before和：after吗？@Bob

:before

和

:after

是CSS引入时创建的两个伪元素。本规范说明了此类内容的确切用途，但简而言之，这些内容用于在使内容在页面上可见的同时不向DOM树公开某些信息。但是如果您希望在其他元素上这样做，该怎么办？喂，a@TheRealChx101你可以用同样的方法。@JamesDonnelly谢谢。我已经弄明白了。我看得不太清楚。更改

图标本身怎么样。。