首頁 > web前端 > css教學 > 如何僅使用 CSS 變更 HTML 清單項目符號顏色?

如何僅使用 CSS 變更 HTML 清單項目符號顏色?

Mary-Kate Olsen
發布: 2024-12-25 10:44:11
原創
710 人瀏覽過

How to Change HTML List Bullet Colors Using Only CSS?

如何在HTML 清單中設定項目符號顏色樣式

問:如何在不使用的情況下變更未排序HTML 清單中項目符號的顏色圖像或跨度標籤?

A:這是一個優雅的解決方案,使用CSS:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}
登入後複製

HTML:

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
登入後複製

這將為您提供紅色的方形項目符號,而不使用任何圖像或垃圾郵件標籤。

以上是如何僅使用 CSS 變更 HTML 清單項目符號顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板