分享一個有趣的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>

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

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

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

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

::marker 偽元素的一些限制

首先，能夠回應::marker 的元素只能是一個list item，譬如ul 內部的li，ol 內部的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 的一些應用探索

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

或者，我們還可以使用emoji 表情：

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

<h1 id="Lorem-nbsp-ipsum-nbsp-dolor-nbsp-sit-nbsp-amet">Lorem ipsum dolor sit amet</h1>
<h1 id="Lorem-nbsp-ipsum-nbsp-dolor-nbsp-sit-nbsp-amet">Lorem ipsum dolor sit amet</h1>

#CodePen Demo -- ::marker example

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

::marker 是可以動態變化的

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

譬如這種，沒被選中不開心，選取開心的效果：

CodePen Demo -- ::marker example

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

搭配counter 一起使用

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

在 content 裡，其實是可以作用一些簡單的字串加法操作的。利用這個，我們可以配合 CSS 計數器 counter-reset 和 counter-increment 實作給 ::marker 元素添加序號的操作。

對counter-increment 還不算很了解的可以移步這裡：MDN -- counter-increment

假設我們有如下HTML：

<h3 id="Lorem-nbsp-ipsum-nbsp-dolor-nbsp-sit-nbsp-amet">Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3 id="Itaque-nbsp-sequi-nbsp-eaque-nbsp-earum-nbsp-laboriosam">Itaque sequi eaque earum laboriosam.</h3>
<p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p>
<h3 id="Laudantium-nbsp-sapiente-nbsp-commodi-nbsp-quidem-nbsp-excepturi">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 example

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

最後

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

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

更多程式相關知識，請造訪：程式設計影片！ ！

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