如何在不使用 Span 的情況下變更 HTML 中的清單項目符號顏色？

在沒有跨度的情況下更改清單項目符號顏色

在 HTML 中，自訂清單項目符號的顏色可能是一個挑戰。雖然可以將清單項目包含在跨度中，但在某些情況下這可能不是一個選項。這個問題尋求一種在不添加額外標記的情況下修改項目符號顏色的解決方案。

為了實現這一點，答案利用了 CSS 的 li:before 偽元素。透過為 li 元素設定 list-style: none ，可以刪除預設項目符號。然後，li:before 元素用於顯示自訂項目符號，並使用 content 屬性指定 unicode 字元。 color 屬性設定所需的項目符號顏色。

以下是CSS 代碼：

li {
  list-style: none;
}

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

要使用此解決方案，只需將CSS 樣式應用到您的列表，如下所示：

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

此技術可讓您變更項目符號的顏色，而無需修改清單項目內容或新增其他標記，從而提供靈活的方式來自訂HTML清單。

以上是如何在不使用 Span 的情況下變更 HTML 中的清單項目符號顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！