您可以在不使用 `` 元素的情況下自訂清單項目符號顏色嗎？

如何自訂沒有跨度的清單項目符號

在HTML 中，項目符號清單提供了一種簡潔有序的方式來呈現項目。但是，預設情況下，項目符號樣式受到限制，如果不添加 Span 等額外元素就無法變更。

您可以在不使用 Span 的情況下更改清單項目符號顏色嗎？

是的，可以用 CSS 和 :before偽元素修改項目符號顏色，而不需要在清單中加入額外的標記

實作

1. 刪除預設項目符號樣式：

   li {
     list-style: none;
   }

2. 插入:在偽元素之前顯示自訂項目符號:

   li:before {
     content: '22'; /* Unicode character for a round bullet */
     display: block;
     position: relative;
     max-width: 0;
     max-height: 0;
     left: -10px;
     top: 0;
     color: green;
     font-size: 20px;
   }

• 內容:
• 內容:指定所需項目符號形狀的Unicode 字元。
• 顏色: 設定項目符號的顏色。

font-size: 調整項目符號的大小。

注意： 此方法在現代瀏覽器中效果很好，但可能不適用於與舊版 IE 相容。

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

範例HTML

以上是您可以在不使用 `` 元素的情況下自訂清單項目符號顏色嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！