不使用span更改HTML列表的项目符号颜色
不使用span更改HTML列表的项目符号颜色
提问于 2009-09-24 15:23:35
我想知道是否有一种方法可以改变列表中项目符号的颜色。
我有一个这样的列表：
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>我不可能在li中插入任何东西，比如'span‘或'p’。因此，我可以以某种智能方式更改项目符号的颜色，但不能更改文本的颜色吗？
回答 9
Stack Overflow用户
发布于 2010-11-27 05:17:45
我没有添加标记就做到了这一点，而是使用了li:before。这显然具有:before的所有局限性(没有旧的IE支持)，但经过一些非常有限的测试，它似乎可以在IE8，火狐和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>
Stack Overflow用户
发布于 2012-10-24 05:58:16
基于@Marc的解决方案--由于项目符号字符在不同的字体和浏览器中呈现方式不同，因此我使用了下面的css3技术和边框半径来制作一个我可以更好控制的项目符号：
li:before {
content: '';
background-color: #898989;
display: inline-block;
position: relative;
height: 12px;
width: 12px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin-right: 4px;
top: 2px;
}Stack Overflow用户
发布于 2017-06-14 21:15:04
我知道这是一个非常非常老的问题，但我一直在玩弄这个问题，并想出了一种我从未见过的方法。为列表指定颜色，然后使用::first-line选择器覆盖文本颜色。我不是专家，所以这种方法可能有问题，但它似乎是有效的。
li {
color: blue;
}
li::first-line {
color: black;
}<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1470214
复制相关文章
相似问题