CSS 偽元素::marker詳解

本文將介紹 CSS 中一個比較有意思的偽元素 ::marker
,利用它,我們可以讓我們的文字序號變得更加的有意思!
什么是 ::marker
CSS 偽元素 ::marker
是從 CSS Pseudo-Elements Level 3 開始新增,CSS Pseudo-Elements Level 4 中完善的一個比較新的偽元素,從 Chrome 86+ 開始得到瀏覽器的支持。
利用它,我們可以給元素添加一個偽元素,用于生成一個項目符號或者數(shù)字。
正常而言,我們有如下結(jié)構(gòu):
<ul> <li>Contagious</li> <li>Stages</li> <li>Pages</li> <li>Courageous</li> <li>Shaymus</li> <li>Faceless</li> </ul>
默認不添加任何特殊的樣式,它的樣式大概是這樣:
利用 ::marker
我們可以對序號前面的小圓點進行改造:
li { padding-left: 12px; cursor: pointer; color: #ff6000; } li::marker { content: '>'; }
就可以將小圓點改造成任意我們想要的:
::marker 偽元素的一些限制
首先,能夠響應 ::marker
的元素只能是一個 list item,譬如 ul
內(nèi)部的 li
,ol
內(nèi)部的 li
都是 list item。
當然,也不是說我們?nèi)绻朐谄渌厣鲜褂镁蜎]有辦法,除了 list item,我們可以對任意設置了 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 的一些應用探索
譬如我們經(jīng)常見到標題前面的一些裝飾:
或者,我們還可以使用 emoji 表情:
都非常適合使用 ::marker
來展示,注意用在非 list-item
元素上需要使用 display: list-item
:
<h1>Lorem ipsum dolor sit amet</h1> <h1>Lorem ipsum dolor sit amet</h1>
h1 { display: list-item; padding-left: 8px; } h1::marker { content: '▍'; } h1:nth-child(2)::marker { content: '😅'; }
CodePen Demo -- ::marker example
::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
搭配 counter 一起使用
可以觀察到的是,::marker
偽元素與 ::before
、::after
偽元素是非常類似的,它們都有一個 content
屬性。
在 content
里,其實是可以作用一些簡單的字符串加法操作的。利用這個,我們可以配合 CSS 計數(shù)器 counter-reset
和 counter-increment
實現(xiàn)給 ::marker
元素添加序號的操作。
對 counter-increment
還不算很了解的可以移步這里:MDN -- counter-increment
假設我們有如下 HTML:
<h3>Lorem ipsum dolor sit amet.</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <h3>Itaque sequi eaque earum laboriosam.</h3> <p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p> <h3>Laudantium sapiente commodi quidem excepturi!</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
我們利用 ::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
最后
本文介紹了什么是 ::marker
以及它的一些實用場景,可以看出雖然 ::before
、::after
也能實現(xiàn)類似的功能,但 CSS 還是提供了更具有語義化的標簽 ::marker
,也表明了大家需要對自己的前端代碼(HTML/CSS)的語義化更加注重。
好了,本文到此結(jié)束,希望對你有幫助 😃
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ,持續(xù)更新,歡迎點個 star 訂閱收藏。
如果還有什么疑問或者建議,可以多多交流,原創(chuàng)文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。
到此這篇關(guān)于CSS ::marker 讓文字序號更有意思的文章就介紹到這了,更多相關(guān)CSS ::marker內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了CSS 列表模型之marker標記的使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習2020-07-23
- 這篇文章主要介紹了淺談CSS 偽元素&偽類的妙用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習2020-09-01
- 塊級格式化上下文,是一個獨立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會相互影響。這篇文章給大家介紹了CSS 使用偽元素清除浮動的方2019-07-01
- 本篇重點介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場景,如填充文本、作為iconfont、進度線、時間線以及幾何圖形,感興趣的朋友一起看看吧2018-02-07
- before 和 after其實就是附著在元素前后的偽元素,說他是偽元素的意思就是,元素不是在DOM中生成的,而是在瀏覽器渲染引擎渲染CSS的時候畫上去的,這篇文章主要給大家介紹2017-09-18