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

Question

我想知道是否有办法改变列表中子弹的颜色。我有一个这样的列表：<ul>   <li>House</li>   <li>Car</li>   <li>Garden</li></ul>我不可能在li中插入任何内容，例如'span'og a'p'。那么我能以某种聪明的方式改变子弹的颜色而不是文本吗？

Answer 1

如果您可以使用图像，那么您可以这样做。如果没有图像，您将无法仅更改项目符号的颜色，也无法更改文本。

使用图像

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

看到

列表样式图像

不使用图像

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

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>