首页 >web前端 >css教程 >我可以在不使用 `` 或 `` 标签的情况下为 HTML 列表项目符号着色吗?

我可以在不使用 `` 或 `` 标签的情况下为 HTML 列表项目符号着色吗?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-10 05:18:12691浏览

Can I Color HTML List Bullets Without Using `` or `` Tags?

不带 Span 的 HTML 列表项目符号着色

问题:

是否可以在不使用 Span 的情况下修改 HTML 列表中项目符号的颜色添加诸如 之类的元素或

  • 答案:

    是的,您可以通过使用 li:before 伪元素来实现此目的:

    li {
      list-style: none;
    }
    
    li:before {
      /* Use 22 for a round bullet */
      /* Use A0 for a square bullet */
      content: '22';
      display: block;
      position: relative;
      max-width: 0;
      max-height: 0;
      left: -10px;
      top: 0;
      color: green;
      font-size: 20px;
    }
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>

    该技术不需要

  • 内的任何附加标记。元素。但它确实有一定的限制:

    • 支持的浏览器:IE8及以上、Firefox、Chrome
    • 项目符号样式仅限于unicode字符

    以上是我可以在不使用 `` 或 `` 标签的情况下为 HTML 列表项目符号着色吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

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