首頁  >  文章  >  web前端  >  分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

青灯夜游
青灯夜游轉載
2021-11-05 10:59:462116瀏覽

這篇文章跟大家介紹一下有趣、比較有趣的CSS3偽元素 ::marker,使用它可以讓我們的列表序號變得更加的有意思,更生動。有興趣的就來和我一起來看看吧!

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

什麼是::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>

預設不加入任何特殊的樣式,它的樣式大概是這樣:

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

利用::marker 我們可以將序號前面的小圓點進行改造:

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

就可以將小圓點改造成任意我們想要的:

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

::marker 偽元素的一些限制

首先,能夠回應::marker 的元素只能是一個list item,譬如ul 內部的liol 內部的li 都是list item

當然,也不是說我們如果想在其他元素上使用就沒有辦法,除了list item,我們可以對任意設定了display: list-item的元素使用::marker 偽元素。

其次,對於偽元素內的樣式,不是任何樣式屬性都能使用,目前我們只能使用這些:

  • all font properties --所以字型屬性相關
  • color -- 顏色值
  • #the content property -- content 內容,類似::before 偽元素的content,用於填入序號內容
  • text-combine-upright (en-US), unicode-bidi and direction properties -- 文件書寫方向相關

#::marker 的一些應用探索

譬如我們經常見到標題前面的一些裝飾:

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

或者,我們還可以使用emoji 表情:

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

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

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

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

#CodePen Demo -- ::marker example

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

::marker 是可以動態變化的

有趣的是,::marker 還是可以動態變化的,利用這一點,可以簡單製作一些有趣的hover 效果。

譬如這種,沒被選中不開心,選取開心的效果:

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

CodePen Demo -- ::marker example

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

搭配counter 一起使用

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

content 裡,其實是可以作用一些簡單的字串加法操作的。利用這個,我們可以配合 CSS 計數器 counter-resetcounter-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 元素新增序號的效果:

分享一個有趣的CSS3偽元素::marker,它使列表序號更生動

# #CodePen Demo -- ::marker example

https://codepen.io/chriscoyier/pen/ExNWmee

最後

本文介紹了什麼是::marker 以及它的一些實用場景,可以看出雖然::before::after 也能實現類似的功能,但CSS 還是提供了更具語意化的標籤::marker,也顯示了大家需要對自己的前端程式碼(HTML/CSS)的語意化更加重視。

好了,本文到此結束,希望對你有幫助 :)

更多程式相關知識,請造訪:程式設計影片! !

以上是分享一個有趣的CSS3偽元素::marker,它使列表序號更生動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除