如何在不使用任何图像或标签的情况下，通过CSS设置UL/LI HTML列表中的符号颜色？

当前的CSS 3列表模块规范确实指定了::marker伪元素，它可以做到你想要的效果。但是，经过测试，发现FF不支持::marker，而且我怀疑Safari和Opera也不支持，当然IE也不支持。

所以，目前唯一的方法是使用带有list-style-image的图像。我猜你可以用标签包裹li的内容，然后设置每个的颜色，但是这个方法对我来说有点不太正规。

对于IE而言，当然不支持这个。

截至2016年12月15日，没有主要的浏览器支持::marker，可以参考caniuse.com/#feat=css-marker-pseudo，现今被称为一个“极端情况”。

真是遗憾！直到2018年，没有一个主要的浏览器支持这个功能！

现在Firefox和Safari确实支持::marker伪元素。

这个答案稍微有点过时。现在所有现代浏览器都支持::marker，除了Opera。请更新您的答案，因为现在它在所有浏览器中都有支持。

在浏览网页时，我发现了一个网站，你试过这个替代方案吗？通过使用CSS设置UL / LI HTML列表中的子弹颜色，而不使用任何图像或span标签。听起来很困难，但你可以在这里制作自己的png图像/图案，然后复制/粘贴你的代码并自定义你的子弹=）还是很优雅吧？

编辑：

在借鉴其他答案中的- verou的思路并应用这种外部来源增强的理念之后，我找到了另一种解决方案：

1. 在头部嵌入Webfont图标库的样式表，例如Font Awesome：

2. 从FontAwesome cheatsheet（或任何其他Webfont图标）中选择一个代码。

例如：

fa-angle-right []

然后在代码的最后一部分添加一个数字，同时设置`font-family`，如下所示：

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

就这样！现在你也有了自定义的子弹符号 =)

我需要一个适用于IE7的解决方案（当然，IE7不支持:before选择器）。很抱歉要说，base64图像在IE7中也不起作用...否则这将是最好的解决方案...

支持出类拔萃的思维！

滚开IE7吧。它现在是一个非常旧的浏览器。这个解决方案很棒！不管怎样，如果你真的想支持IE7，你可以将Base64代码复制并粘贴到现代浏览器的地址栏中，然后使用Ctrl+S（或Mac中的Cmd+S）将图像另存为PNG文件，然后使用实际的PNG文件而不是Base64编码字符串。

Patternify真是太棒了。

比接受的答案要干净得多。我讨厌不得不做负缩进和边距。这样会让维护变得一团糟。

如何在不使用任何图像或span标签的情况下通过CSS设置UL / LI html列表中的子弹颜色

问题的出现原因：

- 需要通过CSS设置UL / LI html列表中的子弹颜色

- 不希望使用图像或span标签来实现

解决方法：

1. 设置UL样式，包括将列表样式设置为无、padding和margin都设置为0。

2. 设置LI样式，包括将左边距设置为1em，文本缩进设置为-0.7em。

3. 使用li::before伪元素，在每个LI之前插入内容，并设置颜色。

4. 可以根据喜好设置颜色。

代码示例：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding-left: 1em; 
  text-indent: -.7em;
}
li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}

  
Foo
  
Bar
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

以上解决方法适用于所有浏览器，包括IE 8及更高版本。可以通过修改li::before的内容、字体和字体大小来自定义子弹样式。