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: '>';
}

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

https://www.98891.com/article-1-1.html

::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 偽元素的樣式。

 

 

總結

列表在前端項目中很常見，應用場景也十分廣泛。個人覺得，::marker偽元素是對list-style-image和list-style-text的補充，三者都是定義標記塊的填充內容，image注重圖像，text注重字符串，::marker則可以定font、color等樣式，各具特色。