如何在不使用偽元素的情況下在 HTML 中建立虛線清單樣式？

使用破折號自訂清單樣式

使用破折號建立HTML 清單樣式可能看起來是一項簡單的任務，但它在尋求無縫且優雅的解決方案時可能會帶來挑戰。您可能正在考慮使用偽元素，例如 li:before { content: "-" };，但讓我們探索一種更精緻的方法，以避免潛在的缺點。

將破折號符號整合到列表樣式中

要精確實現虛線列表樣式，我們可以執行以下步驟：

1. 刪除預設樣式：套用清單樣式-類型：無；到目標ul 元素以消除任何預先定義的項目符號樣式。
2. 實現縮排： 使用 text-indent 來保持清單所需的縮排效果。我們可以指定一個負縮排值，將列表項目稍微向左移動，創造破折號的錯覺。
3. 加上破折號符號： 使用 :before 偽元素插入破折號符號。內容屬性可以設定為“-”（對於簡單的破折號）或“—”或“–”等替代方案，用於不同的破折號樣式。

增強的解決方案

透過組合這些步驟，我們可以建立一個巧妙地展示虛線樣式的清單：

<code class="css">ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}</code>

通用字元用法

上述原則可用於將任何通用字元顯示為清單樣式。只需將破折號“-”替換為 :before 偽元素的 content 屬性中所需的字元即可。

以上是如何在不使用偽元素的情況下在 HTML 中建立虛線清單樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！