如何仅使用 CSS 更改 HTML 列表中的项目符号颜色？

在没有图像或内联元素的 HTML 列表中设置项目符号颜色

当设置无序列表样式时，可能需要更改项目符号的颜色不影响列表项文本。虽然简单地设置

的颜色元素有效，它还会更改文本颜色。

优雅的纯 CSS 解决方案

答案就在 ::before 伪元素中：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em;
  text-indent: -0.7em;
}

li::before {
  content: "•";
  color: #F00;
}

这段代码无需借助图像或内联元素即可达到预期效果。它的工作原理如下：

• list-style: none;删除默认项目符号。
• ::before 创建一个位于每个
• 之前的伪元素。
• 内容：“•”指定所需的项目符号为圆盘或正方形。
• 颜色：#F00；设置项目符号的颜色。
• 使用 padding-left 和 text-indent 缩进列表项文本可确保与项目符号对齐。

以上是如何仅使用 CSS 更改 HTML 列表中的项目符号颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！