如何仅使用 CSS 优雅地为 HTML 列表中的项目符号着色？-css教程-PHP中文网

如何仅使用 CSS 优雅地为 HTML 列表中的项目符号着色？

Barbara Streisand

发布： 2024-12-21 08:25:13

原创

544 人浏览过

How Can I Elegantly Colorize Bullets in HTML Lists Using Only CSS?

使用 CSS 在 HTML 列表中进行项目符号着色：一种优雅的方法

许多开发人员面临着在无序列表 (UL) 中自定义项目符号颜色的挑战使用 HTML 和 CSS 列出项目 (LI)，无需借助图像精灵或 span 标签。本文探讨了一种全面的解决方案，可让您轻松实现此目标。

考虑这样一个场景，您已将子弹形状定义为正方形，但更改 LI 项目的颜色会将所有内容更改为红色。要隔离项目符号着色，您需要一个利用 CSS 功能的优雅解决方案。

最广泛使用的方法涉及以下步骤：

删除原生项目符号： 通过在 UL 元素上设置 list-style: none 来删除默认列表项目符号。
Control文本缩进：为了确保项目符号正确对齐，请对 LI 元素应用负文本缩进以补偿删除的项目符号。
为项目符号创建伪元素：使用CSS 伪元素 (::before) 用于插入自定义项目符号内容。 content 属性可以设置为任何所需的符号，而 color 属性可用于指定项目符号颜色。

以下是示例代码片段：

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

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

li::before {
  content: "• ";
  color: red; /* or any preferred color */
}

登录后复制

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

登录后复制

这种方法提供了一种灵活有效的方法来自定义 HTML 列表中的项目符号颜色，使您无需使用图像或其他 HTML 元素即可实现所需的视觉效果。

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