如何在没有图像或额外标签的情况下更改 HTML 列表中的项目符号颜色？-css教程-PHP中文网

如何在没有图像或额外标签的情况下更改 HTML 列表中的项目符号颜色？

Patricia Arquette

发布： 2024-12-10 11:44:14

原创

777 人浏览过

How to Change Bullet Colors in HTML Lists Without Images or Extra Tags?

如何在不使用图像或 Span 标签的情况下自定义 HTML 列表中的项目符号颜色

挑战

使用 list-style: square; 自定义带有方形项目符号的未排序 HTML 列表时，可能会遇到整个列表项变成指定颜色而不仅仅是项目符号的问题。这就引出了一个问题：我们如何在不借助精灵图像或其他标签的情况下修改子弹的颜色？

解决方案

一个简单有效的解决方案存在：

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: -.7em;
}

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

登录后复制

在此方法中：

列表样式：无；删除默认项目符号。
padding-left 和 text-indent 调整内容位置。
li::before 使用 content 属性插入项目符号。然后，颜色属性指定所需的颜色。

此技术允许在 HTML 列表中优雅地自定义项目符号颜色，而无需其他元素或图像。

以上是如何在没有图像或额外标签的情况下更改 HTML 列表中的项目符号颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！