如何僅使用 CSS 優雅地為 HTML 清單中的項目符號著色？

使用CSS 在HTML 清單中進行項目符號著色：一種優雅的方法

許多開發人員面臨著在無序列表( UL) 中自訂項目符號顏色的挑戰使用HTML 和CSS 列出項目(LI)，無需借助圖像精靈或span 標籤。本文探討了一種全面的解決方案，可讓您輕鬆實現此目標。

考慮這樣一個場景，您已將子彈形狀定義為正方形，但更改 LI 項目的顏色會將所有內容更改為紅色。要隔離項目符號著色，您需要一個利用 CSS 功能的優雅解決方案。

最廣泛使用的方法涉及以下步驟：

1. 刪除原生項目符號： 透過在UL 元素上設定list-style: none 來刪除預設清單項目符號。
2. Control文字縮排：為了確保項目符號正確對齊，請對 LI 元素套用負文字縮排以補償刪除的項目符號。
3. 為項目符號建立偽元素：使用CSS 偽元素 (::before) 用於插入自訂項目符號內容。 content 屬性可以設定為任何所需的符號，而 color 屬性可用於指定項目符號顏色。

以下是範例程式碼片段：

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

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

li::before {
  content: "• ";
  color: red; /* or any preferred color */
}

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

這種方法提供了一種靈活高效的方式來自訂HTML 清單中的項目符號顏色，使您無需使用影像或其他HTML 元素即可實現所需的視覺效果。

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