如何使用 CSS 自訂 HTML 清單中的項目符號顏色？

使用CSS 自訂HTML 清單中的項目符號顏色

在HTML 清單中，自訂項目符號的外觀可以增強內容的視覺吸引力。但是，使用 CSS 設定清單項目的顏色會影響文字和項目符號。要獲得更優雅的解決方案，請考慮以下方法：

為無序列表 (

) 建立新的 CSS 樣式。透過設定 list-style: none; 來停用預設項目符號。

對於每個清單項目 (

• )，在左側新增填充和負文字縮排以偏移項目符號的內容。

  最後，使用 ::before 偽元素在每個清單項目之前建立自訂項目符號。您可以單獨設定內容（如點或正方形）和顏色。

  範例：

  HTML

  • Item 1
  • Item 2
  • Item 3

  CSS

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    padding-left: 1em;
    text-indent: -0.7em;
  }
  
  li::before {
    content: "• ";
    color: red; 
  }

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