首頁 >web前端 >css教學 >我可以在不使用 `` 或 `` 標籤的情況下為 HTML 清單項目符號著色嗎?

我可以在不使用 `` 或 `` 標籤的情況下為 HTML 清單項目符號著色嗎?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-10 05:18:12697瀏覽

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