透過 CSS 修改 li 列表前面點點的顏色

2021-10-11 16:09:27

在 CSS 裡面我們可以透過 list-style 去修改列表的樣式，但如果要修改顏色的話會連文字顏色一起修改，這邊我們可以透過 ::before 的方式，在 li 的內容前面增加一個點點，這樣就可以修改那個點點的顏色了。

先準備簡單的 ul li 結構的內容：

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

接著這樣寫 CSS 就可以了。

ul{
  list-style: none;
}
ul li::before{
/*   可以自訂其他形狀 */
  content: "\2022";
/*   顏色 */
  color: red;
  font-weight: bold;
/*   設定 display */
  display: inline-block;
/*  寬度  */
  width: 1rem;
/*  可以視情況調整形狀的距離  */
  margin-left: -2rem;
}

有需要的可以嘗試看看。

SVG Patterns Gallery- 用 SVG 畫的圖樣，可以用來做背景素材 Excalidraw- 開源免費的手繪風格流程圖繪製工具

你可能也會喜歡的

使用純 CSS 製作箭頭(arrow)

透過 CSS 修改 li 列表前面點點的顏色

Magic Animations CSS3- 實用的 CSS3 動畫效果資源庫

vhs- CSS 的動畫庫

在 Laravel 專案使用 Tailwind CSS 和 Font Awesome

CSS Values- 線上 CSS 語法展示與查詢工具

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。