如何在不使用 Span 的情况下更改 HTML 中的列表项目符号颜色？

在没有跨度的情况下更改列表项目符号颜色

在 HTML 中，自定义列表项目符号的颜色可能是一个挑战。虽然可以将列表项包含在跨度中，但在某些情况下这可能不是一个选项。这个问题寻求一种在不添加额外标记的情况下修改项目符号颜色的解决方案。

为了实现这一点，答案利用了 CSS 的 li:before 伪元素。通过为 li 元素设置 list-style: none ，可以删除默认项目符号。然后，li:before 元素用于显示自定义项目符号，并使用 content 属性指定 unicode 字符。 color 属性设置所需的项目符号颜色。

以下是 CSS 代码：

li {
  list-style: none;
}

li:before {
  content: '22'; /* For a round bullet */
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

要使用此解决方案，只需将 CSS 样式应用到您的列表，如下所示：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

此技术允许您更改项目符号的颜色，而无需修改列表项内容或添加其他标记，从而提供灵活的方式来自定义 HTML列表。

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