建站
咨詢
售后
建站咨詢
新聞中心
本文將介紹 CSS 中一個(gè)比較有意思的偽元素 ::marker，利用它，我們可以讓我們的文字序號(hào)變得更加的有意思!
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、新會(huì)網(wǎng)絡(luò)推廣、成都小程序開(kāi)發(fā)、新會(huì)網(wǎng)絡(luò)營(yíng)銷、新會(huì)企業(yè)策劃、新會(huì)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供新會(huì)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
什么是 ::marker
CSS 偽元素 ::marker 是從 CSS Pseudo-Elements Level 3[1] 開(kāi)始新增，CSS Pseudo-Elements Level 4[2] 中完善的一個(gè)比較新的偽元素，從 Chrome 86+ 開(kāi)始得到瀏覽器的支持。
利用它，我們可以給元素添加一個(gè)偽元素，用于生成一個(gè)項(xiàng)目符號(hào)或者數(shù)字。
正常而言，我們有如下結(jié)構(gòu)：
- Contagious
- Stages
- Pages
- Courageous
- Shaymus
- Faceless
默認(rèn)不添加任何特殊的樣式，它的樣式大概是這樣：
利用 ::marker 我們可以對(duì)序號(hào)前面的小圓點(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)然，也不是說(shuō)我們?nèi)绻朐谄渌厣鲜褂镁蜎](méi)有辦法，除了 list item，我們可以對(duì)任意設(shè)置了 display: list-item 的元素使用 ::marker 偽元素。
其次，對(duì)于偽元素內(nèi)的樣式，不是任何樣式屬性都能使用，目前我們只能使用這些：
- all font properties -- 所以字體屬性相關(guān)
- color -- 顏色值
- the content property -- content 內(nèi)容，類似于 ::before 偽元素 的 content，用于填充序號(hào)內(nèi)容
- text-combine-upright (en-US), unicode-bidi and direction properties -- 文檔書(shū)寫(xiě)方向相關(guān)
::marker 的一些應(yīng)用探索
譬如我們經(jīng)常見(jiàn)到標(biāo)題前面的一些裝飾：
或者，我們還可以使用 emoji 表情：
都非常適合使用 ::marker 來(lái)展示，注意用在非 list-item 元素上需要使用 display: list-item：
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
- h1 {
- display: list-item;
- padding-left: 8px;
- }
- h1::marker {
- content: '▍';
- }
- h1:nth-child(2)::marker {
- content: '';
- }
CodePen Demo -- ::marker example[3]
::marker 是可以動(dòng)態(tài)變化的
有意思的是，::marker 還是可以動(dòng)態(tài)變化的，利用這點(diǎn)，可以簡(jiǎn)單制作一些有意思的 hover 效果。
譬如這種，沒(méi)被選中不開(kāi)心，選中開(kāi)心的效果：
- li {
- color: #000;
- transition: .2s all;
- }
- li:hover {
- color: #ff6000;
- }
- li::marker {
- content: '';
- }
- li:hover::marker {
- content: '';
- }
CodePen Demo -- ::marker example[4]
搭配 counter 一起使用
可以觀察到的是，::marker 偽元素與 ::before、::after 偽元素是非常類似的，它們都有一個(gè) content 屬性。
在 content 里，其實(shí)是可以作用一些簡(jiǎn)單的字符串加法操作的。利用這個(gè)，我們可以配合 CSS 計(jì)數(shù)器 counter-reset 和 counter-increment 實(shí)現(xiàn)給 ::marker 元素添加序號(hào)的操作。
對(duì) counter-increment 還不算很了解的可以移步這里：MDN -- counter-increment[5]
假設(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 計(jì)數(shù)器 counter-increment 實(shí)現(xiàn)一個(gè)自動(dòng)計(jì)數(shù)且 h3 前面帶一個(gè) emoji 表情的有序列表：
- body {
- counter-reset: h3;
- }
- h3 {
- counter-increment: h3;
- display: list-item;
- }
- h3::marker {
- display: list-item;
- content: "" counter(h3) " ";
- color: lightsalmon;
- font-weight: bold;
- }
效果如下，實(shí)現(xiàn)了一個(gè)自動(dòng)給 ::marker 元素添加序號(hào)的效果：
CodePen Demo -- ::marker example[6]
最后
本文介紹了什么是 ::marker 以及它的一些實(shí)用場(chǎng)景，可以看出雖然 ::before 、::after也能實(shí)現(xiàn)類似的功能，但 CSS 還是提供了更具有語(yǔ)義化的標(biāo)簽 ::marker，也表明了大家需要對(duì)自己的前端代碼(HTML/CSS)的語(yǔ)義化更加注重。
好了，本文到此結(jié)束，希望對(duì)你有幫助 ????
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[7] 。
參考資料
[1]CSS Pseudo-Elements Level 3:
https://drafts.csswg.org/css-lists-3/#marker-pseudo
[2]CSS Pseudo-Elements Level 4:
https://drafts.csswg.org/css-pseudo-4/#marker-pseudo
[3]CodePen Demo -- ::marker example:
https://codepen.io/Chokcoco/pen/eYvZmpW
[4]CodePen Demo -- ::marker example:
https://codepen.io/Chokcoco/pen/eYvZmpW
[5]MDN -- counter-increment:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter-increment
[6]CodePen Demo -- ::marker example:
https://codepen.io/chriscoyier/pen/ExNWmee
[7]Github -- iCSS:
https://github.com/chokcoco/iCSS
本文轉(zhuǎn)載自微信公眾號(hào)「iCSS前端趣聞」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系iCSS前端趣聞公眾號(hào)。
當(dāng)前題目：CSS推陳出新|::marker讓文字序號(hào)更有意思
文章路徑：http://www.5511xx.com/article/dppsjsg.html
