如何在沒有圖像或額外標籤的情況下更改 HTML 清單中的項目符號顏色？

Patricia Arquette

發布： 2024-12-10 11:44:14

原創

777 人瀏覽過

How to Change Bullet Colors in HTML Lists Without Images or Extra Tags?

如何在不使用影像或Span 標籤的情況下自訂HTML 清單中的項目符號顏色

挑戰

使用list-style: square; 自訂帶有方形項目符號的未排序HTML 清單時，可能會遇到整個清單項目變成指定顏色而不僅僅是項目符號的問題。這就引出了一個問題：我們如何在不借助精靈圖像或其他標籤的情況下修改子彈的顏色？

解決方案

一個簡單有效的解決方案存在：

HTML

CSS

padding-left 和 text-indent 調整內容位置。

li::before 使用 content 屬性插入項目符號。然後，顏色屬性指定所需的顏色。此技術允許在 HTML 清單中優雅地自訂項目符號顏色，而無需其他元素或圖像。

以上是如何在沒有圖像或額外標籤的情況下更改 HTML 清單中的項目符號顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：php.cn

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章