首页 >web前端 >css教程 >如何仅使用 CSS 更改 HTML 列表项目符号颜色?

如何仅使用 CSS 更改 HTML 列表项目符号颜色?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-25 10:44:11719浏览

How to Change HTML List Bullet Colors Using Only CSS?

如何在 HTML 列表中设置项目符号颜色样式

问:如何在不使用的情况下更改未排序 HTML 列表中项目符号的颜色图像或跨度标签?

A:这是一个优雅的解决方案,使用CSS:

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

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

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}

HTML:

<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>

这将为您提供红色的方形项目符号,而不使用任何图像或垃圾邮件标签。

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn