建站
咨詢
售后
建站咨詢
新聞中心
本文將介紹 CSS 中一個比較有意思的偽元素 ::marker，利用它，我們可以讓我們的文字序號變得更加的有意思!
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、成都網(wǎng)站設(shè)計、新會網(wǎng)絡(luò)推廣、成都小程序開發(fā)、新會網(wǎng)絡(luò)營銷、新會企業(yè)策劃、新會品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供新會建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
什么是 ::marker
CSS 偽元素 ::marker 是從 CSS Pseudo-Elements Level 3[1] 開始新增，CSS Pseudo-Elements Level 4[2] 中完善的一個比較新的偽元素，從 Chrome 86+ 開始得到瀏覽器的支持。
利用它，我們可以給元素添加一個偽元素，用于生成一個項目符號或者數(shù)字。
正常而言，我們有如下結(jié)構(gòu)：
- Contagious
- Stages
- Pages
- Courageous
- Shaymus
- Faceless
默認(rèn)不添加任何特殊的樣式，它的樣式大概是這樣：
利用 ::marker 我們可以對序號前面的小圓點進(jìn)行改造：
- 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。
當(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：
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 是可以動態(tài)變化的
有意思的是，::marker 還是可以動態(tài)變化的，利用這點，可以簡單制作一些有意思的 hover 效果。
譬如這種，沒被選中不開心，選中開心的效果：
- 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 偽元素是非常類似的，它們都有一個 content 屬性。
在 content 里，其實是可以作用一些簡單的字符串加法操作的。利用這個，我們可以配合 CSS 計數(shù)器 counter-reset 和 counter-increment 實現(xiàn)給 ::marker 元素添加序號的操作。
對 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 計數(shù)器 counter-increment 實現(xiàn)一個自動計數(shù)且 h3 前面帶一個 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;
- }
效果如下，實現(xiàn)了一個自動給 ::marker 元素添加序號的效果：
CodePen Demo -- ::marker example[6]
最后
本文介紹了什么是 ::marker 以及它的一些實用場景，可以看出雖然 ::before 、::after也能實現(xiàn)類似的功能，但 CSS 還是提供了更具有語義化的標(biāo)簽 ::marker，也表明了大家需要對自己的前端代碼(HTML/CSS)的語義化更加注重。
好了，本文到此結(jié)束，希望對你有幫助 ????
更多精彩 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)載自微信公眾號「iCSS前端趣聞」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系iCSS前端趣聞公眾號。
網(wǎng)站題目：CSS推陳出新|::marker讓文字序號更有意思
URL鏈接：http://www.dlmjj.cn/article/dppsjsg.html
