::marker
偽元素 ::marker，可作用在任何設(shè)置了?display: list-item 的元素或偽元素上，例如<li>和<summary>。
/**
<ul>
<li>Peaches</li>
<li>Apples</li>
<li>Plums</li>
</ul>
*/
ul li::marker {
color: red;
font-size: 1.5em;
}
?
但是，對(duì)于::marker偽元素內(nèi)的樣式，目前只允許使用：
- all font properties -- 所以字體屬性相關(guān)
- color -- 顏色值
-
the content property -- content 內(nèi)容，類(lèi)似于
::before偽元素 的 content，用于填充序號(hào)內(nèi)容 - text-combine-upright (en-US), unicode-bidi and direction properties -- 文檔書(shū)寫(xiě)方向相關(guān)
瀏覽器兼容性：
?
其他探索
1. 動(dòng)態(tài)變化
::marker 動(dòng)態(tài)的改變，可以搭配 :hover 實(shí)現(xiàn)鼠標(biāo)懸停變換。
li {
color: #000;
transition: .2s all;
}
li:hover {
color: #ff6000;
}
li::marker {
content: '??';
}
li:hover::marker {
content: '??';
}
?
?2. 搭配 CSS 計(jì)數(shù)器 counter
::marker 也有 content 樣式屬性，由于 content 的 value 是可以做簡(jiǎn)單的字符串加法操作的。
因此，利用?::marker?和 CSS 計(jì)數(shù)器?counter-increment?實(shí)現(xiàn)一個(gè)自動(dòng)計(jì)數(shù)且?h3?前面帶一個(gè)特定符號(hào)的有序列表：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-578185.html
h3 {
counter-increment: h3;
display: list-item;
}
h3::marker {
display: list-item;
content: "#" counter(h3) " ";
color: lightsalmon;
font-weight: bold;
}
body {
counter-reset: h3;
line-height: 1.4;
font-family: system-ui;
margin: 3rem;
}
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-578185.html
到了這里，關(guān)于CSS 偽元素： ::marker 自定義列表序號(hào)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
