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

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

Mary-Kate Olsen
发布: 2024-12-25 10:44:11
原创
710 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板