更改列表项目符号颜色

---

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

---

Change Bullet Color

• Adele
• Agnes
• Billy
• Bob

亲自试一试 »

---

步骤 1) 添加 HTML:

Create a basic list:

实例

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

步骤 2) 添加 CSS:

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

实例

ul {
  list-style: none; /* 删除默认项目符号 */
}

ul li::before {
  content: "2022";  /* 添加内容: 2022 is the CSS Code/unicode for a bullet */
  color: red; /* 改变颜色 */
  font-weight: bold; /* 如果你想让它变粗 */
  display: inline-block; /* 需要在项目符号和文本之间添加空格 */
  width: 1em; /* 也需要空间（如果需要调整） */
  margin-left: -1em; /* 也需要空间（如果需要调整） */
}
亲自试一试 »