如何用短劃線符號取代 HTML 清單項目符號？

使用破折號自訂HTML 中的清單樣式

在HTML 中，預設清單樣式呈現為圓盤或方塊，但您可以可能希望使用破折號自訂項目符號點。為此，您可以利用 CSS 修改清單外觀。

使用 :before 偽類

一種方法涉及使用 :before 偽類插入每個列表項目前的破折號。此技術可讓您在新增破折號的同時保持標準清單縮排。然而，由於 CSS 支援的差異，這種方法可能會在不同瀏覽器之間引入潛在的兼容性問題。

將list-style-type 與text-indent 結合

更可靠的方法解決方案是使用list-style-type: none 去掉預設的項目符號，然後將text-indent 設為負值以保持縮排清單效果。此外，您可以使用 :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>

使用和輸出

在HTML 中，您可以將dashed 類別應用於無dashed 類別序列表(

)：

<code class="html">Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text</code>

這將產生一個自訂列表，其中以破折號作為項目符號點，同時保留列表縮排：

• 第一
• 第二
• 第三

• 第一

  • 第二
  • 第三種

此方法是跨瀏覽器相容的，可以有效地用自訂的破折號取代預設的清單樣式。

以上是如何用短劃線符號取代 HTML 清單項目符號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！