這篇文章跟大家介紹一下有趣、比較有趣的CSS3偽元素 ::marker,使用它可以讓我們的列表序號變得更加的有意思,更生動。有興趣的就來和我一起來看看吧!
CSS 偽元素::marker
是從CSS Pseudo-Elements Level 3 開始新增, CSS Pseudo-Elements Level 4 中完善的一個比較新的偽元素,從Chrome 86 開始得到瀏覽器的支援。 【學習影片分享:css影片教學】
利用它,我們可以為元素添加一個偽元素,用於產生一個項目符號或數字。
正常而言,我們有以下結構:
<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
的元素只能是一個list item,譬如ul
內部的li
,ol
內部的li
都是list item。
當然,也不是說我們如果想在其他元素上使用就沒有辦法,除了list item,我們可以對任意設定了display: list-item
的元素使用::marker
偽元素。
其次,對於偽元素內的樣式,不是任何樣式屬性都能使用,目前我們只能使用這些:
::before
偽元素的content,用於填入序號內容譬如我們經常見到標題前面的一些裝飾:
或者,我們還可以使用emoji 表情:
都非常適合使用::marker
來展示,注意用在非list-item
元素上需要使用 display: list-item
:
<h1>Lorem ipsum dolor sit amet</h1> <h1>Lorem ipsum dolor sit amet</h1>
#CodePen Demo -- ::marker example
https://codepen.io/ Chokcoco/pen/eYvZmpW
有趣的是,::marker
還是可以動態變化的,利用這一點,可以簡單製作一些有趣的hover 效果。
譬如這種,沒被選中不開心,選取開心的效果:
CodePen Demo -- ::marker example
https://codepen.io/Chokcoco/pen/eYvZmpW
可以觀察到的是, ::marker
偽元素與::before
、::after
偽元素是非常類似的,它們都有一個content
屬性。
在 content
裡,其實是可以作用一些簡單的字串加法操作的。利用這個,我們可以配合 CSS 計數器 counter-reset
和 counter-increment
實作給 ::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 計數器counter-increment
實作一個自動計數且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; }
效果如下,實作了一個自動為::marker
元素新增序號的效果:
# #CodePen Demo -- ::marker examplehttps://codepen.io/chriscoyier/pen/ExNWmee
本文介紹了什麼是::marker
以及它的一些實用場景,可以看出雖然::before
、::after
也能實現類似的功能,但CSS 還是提供了更具語意化的標籤::marker
,也顯示了大家需要對自己的前端程式碼(HTML/CSS)的語意化更加重視。
好了,本文到此結束,希望對你有幫助 :)
更多程式相關知識,請造訪:程式設計影片! !
以上是分享一個有趣的CSS3偽元素::marker,它使列表序號更生動的詳細內容。更多資訊請關注PHP中文網其他相關文章!