使用破折號自訂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中文網其他相關文章!