如何僅使用 CSS 來變更 HTML 清單中的項目符號顏色？

在沒有圖像或內聯元素的HTML 清單中設定項目符號顏色

設定無序列表樣式時，可能需要變更項目符號的顏色不影響清單項目文字。雖然簡單地設定

的顏色元素有效，它也會更改文字顏色。

優雅的純CSS 解決方案

答案就在::before 偽元素中：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em;
  text-indent: -0.7em;
}

li::before {
  content: "•";
  color: #F00;
}

這段程式碼無需借助圖像或內聯元素即可達到預期效果。它的工作原理如下：

• list-style: none;刪除預設項目符號。
• ::before 建立一個位於每個
• 之前的偽元素。
• 內容：「•」指定所需的項目符號為圓盤或方塊。
• 顏色：#F00；設定項目符號的顏色。
• 使用 padding-left 和 text-indent 縮排清單項目文字可確保與項目符號對齊。

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