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

在 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;
}

有需要的可以嘗試看看。