透過 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 打造適合遠端團隊的即時協作工具

課程推薦

AI虛擬角色生成實戰班

本課程將帶你從 AI 虛擬角色的概念出發，認識 AI Persona 的生成流程與應用方式，學會打造專屬自己的 AI 分身。課程中會學習 Prompt 提示詞撰寫、真人感人像生成、固定角色模板建立，並延伸出同一角色的多場景、多服裝與多情境照片。

OpenClaw 龍蝦 AI 代理人實作課：零基礎打造 AI 辦公代理人

本課程從安裝部署、身份設定、技能安裝到實戰應用，帶你從零建立一個專屬的 AI 工作助手－OpenClaw 龍蝦，這個 AI 助手可以替你蒐集情報、摘要文件、整理郵件、生成內容、定時提醒，全部自動完成。

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

Google Gemini AI 多媒體生成工具應用實戰：從 Imagen 4、Veo 3、Chirp、Lyria 到 nano-banana

如何只用文字說明提示就生成不同的圖像結果？亦或是會議上的語音檔轉文字？這是一堂通盤性、全面性的Google Gemini AI多媒體生成工具應用實戰！

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

AI 數據自動化工具實戰班：Google Sheet x Apps Script x NotebookLM 暨資料處理函數

本門課將教你如何善用 AI 功能與工具，進行自動分析數據提供有幫助的建議與洞察，以及使用 AI 驅動的公式自動化計算。

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

3 小時掌握自動化工作新手應用實作 – n8n AI Agent

這門課程將帶你循序漸進掌握 n8n 的自動化技巧，從基礎認識與操作入門，到進階節點應用與流程控制，再到 Google 服務的整合實作，最後延伸至部署思維與 OpenAI API 的智慧化串接。

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

用 AI 生成網站？ AI 高效網站設計實戰課：ChatGPT X HTML X SEO

利用 AI 提升網站設計效率與 SEO 排名！了解如何透過 ChatGPT 等工具快速建立 HTML 架構，優化關鍵字與用戶體驗，讓網站更具競爭力。

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

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

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

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

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

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