css ::marker偽元素，修改li的項目符號顏色，字號字體
::marker是什么？
<ul><li>Contagious</li><li>Stages</li><li>Pages</li><li>Courageous</li><li>Shaymus</li><li>Faceless</li></ul>
默認(rèn)不添加任何特殊的樣式，它的樣式大概是這樣：
利用 ::marker 我們可以對序號前面的小圓點進行改造：
li {padding-left: 12px;cursor: pointer;color: #ff6000;}li::marker {content: '>';}
就可以將小圓點改造成任意我們想要的：
::marker使用說明
1、除了ul或ol下的li標(biāo)簽可直接使用::marker偽元素，其他元素使用需要設(shè)置display:list-item的屬性才支持哦。
2、其次，對于::marker偽元素的樣式，不是任何樣式屬性都能使用，目前只支持如下這樣樣式：（另外注意不允許的 background 屬性是沒有效果的）
animation-*transition-*colordirectionfont-*contentunicode-bidiwhite-space
3、::marker偽元素標(biāo)記不是所有瀏覽器都支持，包括chrome也只是在80以上版本通過啟用experimental Web Platform才支持，而safari瀏覽器目前還不支持對content進行自定義，只支持比較原始的幾種。
::marker調(diào)試
Chrome DevTools隨時可以幫助你檢查，調(diào)試和修改應(yīng)用于 ::marker 偽元素的樣式。
總結(jié)
列表在前端項目中很常見，應(yīng)用場景也十分廣泛。個人覺得，::marker偽元素是對list-style-image和list-style-text的補充，三者都是定義標(biāo)記塊的填充內(nèi)容，image注重圖像，text注重字符串，::marker則可以定font、color等樣式，各具特色。
學(xué)習(xí)更多技能
請點擊下方公眾號
評論
圖片
表情