您可以在不使用 `` 元素的情况下自定义列表项目符号颜色吗？

如何自定义没有跨度的列表项目符号

在 HTML 中，项目符号列表提供了一种简洁有序的方式来呈现项目。但是，默认情况下，项目符号样式受到限制，如果不添加 Span 等额外元素就无法更改。

您可以在不使用 Span 的情况下更改列表项目符号颜色吗？

是的，可以使用 CSS 和 :before 伪元素修改项目符号颜色，而不需要在列表中添加额外的标记

实现

1. 删除默认项目符号样式：

   li {
     list-style: none;
   }

   登录后复制

2. 插入:在伪元素之前显示自定义项目符号:

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

   登录后复制

• 内容:指定所需项目符号形状的 Unicode 字符。
• 颜色: 设置项目符号的颜色。
• font-size: 调整项目符号的大小。

注意： 此方法在现代浏览器中效果很好，但可能不适用于与旧版 IE 兼容。

示例HTML

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

以上是您可以在不使用 `` 元素的情况下自定义列表项目符号颜色吗？的详细内容。更多信息请关注PHP中文网其他相关文章！