如何在 HTML 中建立破折號樣式清單：超越預設項目符號樣式？

HTML 清單樣式自訂：使用破折號建立清單

在 HTML 中，list-style-type 屬性用於指定清單項目的項目符號樣式。但是，它本身並不支援破折號作為項目符號字元。

使用 :before 偽類

建立破折號樣式清單的一種方法是使用 :before 偽類。這允許您在每個清單項目之前插入內容並獨立設定其樣式。

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

content 屬性在每個 li 之前插入破折號“-”，而 margin-right 在破折號和列表之間提供一些空間項目文字。

利用文字縮排

要在使用 :before 偽類時保持縮排清單效果，可以對列表項目套用負文字縮排。

<code class="css">ul.dashed > li {
  text-indent: -5px;
}</code>

這抵消了項目符號樣式建立的預設縮進，將破折號與清單項目文字的開頭對齊。

通用列表字元自訂

使用通用字元作為清單項目符號，您可以簡單地在list-style-type 屬性中指定它，例如：

<code class="css">ul.generic {
  list-style-type: disc;
}

ul.square {
  list-style-type: square;
}

ul.circle {
  list-style-type: circle;
}</code>

這允許您建立具有不同項目符號形狀的列表，並根據需要自訂列表的視覺外觀。

以上是如何在 HTML 中建立破折號樣式清單：超越預設項目符號樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！