如何 - 更改列表的项目符号颜色

了解如何使用 CSS 更改列表的项目符号颜色。

更改项目符号颜色

阿黛尔
艾格尼丝
比利
鲍勃

亲自试一试 »

步骤1）添加HTML：

创建一个基本列表：

示例

<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>

步骤2）添加CSS：

默认情况下，无法更改列表项的项目符号颜色。不过，您可以使用一些 CSS 技巧来实现这一点。请注意，如果您使用 CSS 框架或特殊样式表，您可能需要对其进行一些不同的调整：

示例

ul {
list-style: none; /* Remove default bullets */
}

ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: red; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}

亲自试一试 »