css ::marker僞元素，修改li的項目符号顔色，字号字型

現在，在使用 <ul> 或 <ol> 時自定義數字或項目符号的顔色，大小或類型很簡單。

利用css的:marker僞元素，我們可以很輕易的更改内容以及項目符号和數字的某些樣式。

::marker僞元素它作用在任何設定了display:list-item的元素或僞元素上。

::marker是什麼？

css 僞元素 ::marker 是從 CSS Pseudo-Elements Level 3 開始新增，CSS Pseudo-Elements Level 4 中完善的一個比較新的僞元素，從 Chrome 86+ 開始得到浏覽器的支援。

利用它，我們可以給元素添加一個僞元素，用于生成一個項目符号或者數字。

正常而言，我們有如下結構：

<ul>
  <li>Contagious</li>
  <li>Stages</li>
  <li>Pages</li>
  <li>Courageous</li>
  <li>Shaymus</li>
  <li>Faceless</li>
</ul>      

預設不添加任何特殊的樣式，它的樣式大概是這樣：

利用 ::marker 我們可以對序号前面的小圓點進行改造：

li {
  padding-left: 12px;
  cursor: pointer;
  color: #ff6000;
}
li::marker {
  content: '>';
}      

就可以将小圓點改造成任意我們想要的：

::marker使用說明​

1、除了ul或ol下的li标簽可直接使用::marker僞元素，其他元素使用需要設定display:list-item的屬性才支援哦。

2、其次，對于::marker僞元素的樣式，不是任何樣式屬性都能使用，目前隻支援如下這樣樣式：（另外注意不允許的 background 屬性是沒有效果的）

animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space      

3、::marker僞元素标記不是所有浏覽器都支援，包括chrome也隻是在80以上版本通過啟用experimental Web Platform才支援，而safari浏覽器目前還不支援對content進行自定義，隻支援比較原始的幾種。

::marker調試

Chrome DevTools随時可以幫助你檢查，調試和修改應用于 ::marker 僞元素的樣式。

總結