html – 如何在无序列表中更改点的颜色?

前端之家收集整理的这篇文章主要介绍了html – 如何在无序列表中更改点的颜色?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在无序列表中改变点的颜色:
<ul>
<li></li>
</ul>

有没有办法,我可以用CSS这样做?我看不到房产?

解决方法

最简单(而不是无意义)的方法是将内容包装在跨度标签中,然后将项目符号颜色应用于li和文本颜色.

代码

<ul>
    <li><span>text</span></li>
    <li><span>text</span></li>
    <li><span>text</span></li>
</ul>
ul li {
    /* Bullet color */
    color: red;
    list-style-type: disc;
}

ul li span {
    /* Text color */
    color: black;
}

jsFiddle preview

如果您无法修改HTML,您可以使用自定义颜色的点列表风格图像,也可以使用生成内容(即,之前),并相应地进行颜色(但要注意列表项目符号位置问题).

这是an example with li:before

ul li {
    /* Text color */
    color: black;
    list-style-type: none;
}

ul li:before {
    /* Unicode bullet symbol */
    content: '\2022 ';
    /* Bullet color */
    color: red;
    padding-right: 0.5em;
}

猜你在找的HTML相关文章