這篇文章主要講解了“怎么使用CSS3偽元素::marker”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用CSS3偽元素::marker”吧！

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、網(wǎng)站制作與策劃設(shè)計,新寧網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:新寧等地區(qū)。新寧做網(wǎng)站價格咨詢:028-86922220

什么是 ::marker

CSS 偽元素 ::marker 是從 CSS Pseudo-Elements Level 3 開始新增，CSS Pseudo-Elements Level 4 中完善的一個比較新的偽元素，從 Chrome 86+ 開始得到瀏覽器的支持。【學(xué)習(xí)視頻分享：css視頻教程】

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

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

  
Contagious
  
Stages
  
Pages
  
Courageous
  
Shaymus
  
Faceless

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

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

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

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

::marker 偽元素的一些限制

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

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

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

• all font properties-- 所以字體屬性相關(guān)

• color -- 顏色值

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

• text-combine-upright (en-US), unicode-bidi and direction properties -- 文檔書寫方向相關(guān)

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

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

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

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

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

CodePen Demo -- ::marker example

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

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

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

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

CodePen Demo -- ::marker example

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

搭配 counter 一起使用

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

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

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

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

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Itaque sequi eaque earum laboriosam.
Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?
Laudantium sapiente commodi quidem excepturi!
Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

body {
  counter-reset: h4;
}

h4 {
  counter-increment: h4;
  display: list-item;
}

h4::marker {
  display: list-item;
  content: "?" counter(h4) " ";
  color: lightsalmon;
  font-weight: bold;
}

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

感謝各位的閱讀，以上就是“怎么使用CSS3偽元素::marker”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么使用CSS3偽元素::marker這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！