如何使用 CSS 自定义 HTML 列表中的项目符号颜色？

使用 CSS 自定义 HTML 列表中的项目符号颜色

在 HTML 列表中，自定义项目符号的外观可以增强内容的视觉吸引力。但是，使用 CSS 设置列表项的颜色会影响文本和项目符号。要获得更优雅的解决方案，请考虑以下方法：

为无序列表 (

) 创建新的 CSS 样式。通过设置 list-style: none; 来禁用默认项目符号。

对于每个列表项 (

• )，在左侧添加填充和负文本缩进以偏移项目符号的内容。

  最后，使用 ::before 伪元素在每个列表项之前创建自定义项目符号。您可以单独设置内容（如点或正方形）和颜色。

  示例：

  HTML

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  CSS

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    padding-left: 1em;
    text-indent: -0.7em;
  }
  
  li::before {
    content: "• ";
    color: red; 
  }

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