html - 在不使用 span 的情况下更改 HTML 列表的元素符号颜色

Question

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

我有一个这样的列表:

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

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

Answer 1

我在没有添加标记的情况下做到了这一点，而是使用了 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>