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

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

什么是 ::marker

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

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

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

<ul>
  <li>Contagious</li>
  <li>Stages</li>
  <li>Pages</li>
  <li>Courageous</li>
  <li>Shaymus</li>
  <li>Faceless</li>
</ul>

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

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

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

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

::marker 偽元素的一些限制

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

當(dāng)然，也不是說我們?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)常見到標(biāo)題前面的一些裝飾：

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

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

<h2>Lorem ipsum dolor sit amet</h2>
<h2>Lorem ipsum dolor sit amet</h2>

CodePen Demo -- ::marker example

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

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

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

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

CodePen Demo -- ::marker example

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

搭配 counter 一起使用

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

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

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

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

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

我們利用 ::marker 和 CSS 計(jì)數(shù)器 counter-increment 實(shí)現(xiàn)一個(gè)自動(dòng)計(jì)數(shù)且 h4 前面帶一個(gè) 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;
}

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

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

當(dāng)前名稱：怎么使用CSS3偽元素::marker
URL網(wǎng)址：http://chinadenli.net/article26/giiecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、做網(wǎng)站、虛擬主機(jī)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)