如何创建 - 更改列表的项目符号颜色
了解如何使用 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;
/* 也需要空间(如果需要调整) */
}
亲自试一试 »