分享一個有趣的CSS3偽元素-marker它使列表序號更生動

第分享一個有趣的CSS3偽元素::marker，它使列表序號更生動什么是::marker

CSS偽元素::marker是從CSSPseudo-ElementsLevel3開始新增，CSSPseudo-ElementsLevel4中完善的一個比較新的偽元素，從Chrome86+開始得到瀏覽器的支持。

利用它，我們可以給元素添加一個偽元素，用于生成一個項(xiàng)目符號或者數(shù)字。

正常而言，我們有如下結(jié)構(gòu)：

liContagious/li

liStages/li

liPages/li

liCourageous/li

liShaymus/li

liFaceless/li

/ul

默認(rèn)不添加任何特殊的樣式，它的樣式大概是這樣：

利用::marker我們可以對序號前面的小圓點(diǎn)進(jìn)行改造：

padding-left:12px;

cursor:pointer;

color:#ff6000;

li::marker{

content:

}

就可以將小圓點(diǎn)改造成任意我們想要的：

::marker偽元素的一些限制

首先，能夠響應(yīng)::marker的元素只能是一個listitem，譬如ul內(nèi)部的li，ol內(nèi)部的li都是listitem。

當(dāng)然，也不是說我們?nèi)绻朐谄渌厣鲜褂镁蜎]有辦法，除了listitem，我們可以對任意設(shè)置了display:list-item的元素使用::marker偽元素。

其次，對于偽元素內(nèi)的樣式，不是任何樣式屬性都能使用，目前我們只能使用這些：

allfontproperties--所以字體屬性相關(guān)

color--顏色值

thecontentproperty--content內(nèi)容，類似于::before偽元素的content，用于填充序號內(nèi)容

text-combine-upright(en-US),unicode-bidianddirectionproperties--文檔書寫方向相關(guān)

::marker的一些應(yīng)用探索

譬如我們經(jīng)常見到標(biāo)題前面的一些裝飾：

或者，我們還可以使用emoji表情：

都非常適合使用::marker來展示，注意用在非list-item元素上需要使用display:list-item：

h1Loremipsumdolorsitamet/h1

h1Loremipsumdolorsitamet/h1

CodePenDemo--::markerexample

https://codepen.io/Chokcoco/pen/eYvZmpW

::marker是可以動態(tài)變化的

有意思的是，::marker還是可以動態(tài)變化的，利用這點(diǎn)，可以簡單制作一些有意思的hover效果。

譬如這種，沒被選中不開心，選中開心的效果：

CodePenDemo--::markerexample

https://codepen.io/Chokcoco/pen/eYvZmpW

搭配counter一起使用

可以觀察到的是，::marker偽元素與::before、::after偽元素是非常類似的，它們都有一個content屬性。

在content里，其實(shí)是可以作用一些簡單的字符串加法操作的。利用這個，我們可以配合CSS計(jì)數(shù)器counter-reset和counter-increment實(shí)現(xiàn)給::marker元素添加序號的操作。

對counter-increment還不算很了解的可以移步這里：MDN--counter-increment

假設(shè)我們有如下HTML：

h3Loremipsumdolorsitamet./h3

pLoremipsumdolorsitametconsecteturadipisicingelit./p

h3Itaquesequieaqueearumlaboriosam./h3

pRationeculpareprehenderitbeataequaeratvoluptatibus,debitisiusto/p

h3Laudantiumsapientecommodiquidemexcepturi!/h3

pLoremipsumdolorsitametconsecteturadipisicingelit./p

我們利用::marker和CSS計(jì)數(shù)器counter-increment實(shí)現(xiàn)一個自動計(jì)數(shù)且h3前面帶一個emoji表情的有序列表：

body{

counter-reset:h3;

counter-increment:h3;

display:list-item;

h3::marker{

display:list-item;

content:?counter(h3)

color:lightsalmon;

font-weight:bold;

}

效果如下，實(shí)現(xiàn)了一個自動給::marker元素添加序號的效果：

CodePenDemo--::markerexample

https://codepen.io/chriscoyier/pen/ExNWmee

本文介紹了什么是::marker以及