在不使用 span 的情况下更改 HTML 列表的项目符号颜色

Question

我想知道是否有办法改变列表中项目符号的颜色。

我有一个这样的列表：

 <ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

我不可能在 li 中插入任何内容，例如“span”和“p”。那么我可以以某种巧妙的方式更改项目符号的颜色而不是文本吗？

原文由 Kim Andersen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你可以使用图像，那么你就可以做到这一点。如果没有图像，您将无法仅更改项目符号的颜色，而不能更改文本。

使用图片

li { list-style-image: url(images/yourimage.jpg); }

看

列表样式图像

不使用图像

然后，您必须编辑 HTML 标记并在列表中包含一个 span，并用不同的颜色为 li 和 span 着色。

原文由 rahul 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

我在没有添加标记的情况下进行了管理，而是使用 li:before 。这显然具有 :before 的所有限制（不支持旧的 IE），但经过一些非常有限的测试后，它似乎适用于 IE8、Firefox 和 Chrome。项目符号样式也受 unicode 中内容的限制。

 li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

 <ul>
  <li>foo</li>
  <li>bar</li>
</ul>

原文由 Marc 发布，翻译遵循 CC BY-SA 3.0 许可协议