現在使用 <ul>
或 <ol>
時,可以輕鬆自訂顏色、大小,或是數字/項目符號類型。
多虧於 Bloomberg 贊助的 Igalia,我們終於能大肆利用小訣竅,提供樣式清單。看看!
有了 CSS ::marker
,我們就能變更內容以及項目符號和數字樣式。
瀏覽器相容性
::marker
適用於電腦版和 Android 版、電腦版 Safari 和 iOS Safari (但僅限 color
和 font-*
屬性,請參閱「錯誤 204163」),以及以 Chromium 為基礎的電腦和 Android 瀏覽器。
虛擬元素
請參考以下重要的 HTML 未排序清單:
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>
這會導致下列顯示出乎意料的資料:
每個 <li>
項目開頭的點完全免費!瀏覽器正在為您繪製並產生標記方塊。
今天我們很高興能夠介紹 ::marker
虛擬元素,這個虛擬元素可讓您設定瀏覽器為您建立的項目符號元素樣式。
建立標記
在每個清單項目元素中,系統會自動產生 ::marker
虛擬元素標記方塊,緊接在實際內容與 ::before
虛擬元素之前。
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
一般而言,清單項目是 <li>
HTML 元素,但其他元素也可以使用 display: list-item
成為清單項目。
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd {
display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
}
設定標記樣式
在 ::marker
之前,你可以使用 list-style-type
和 list-style-image
設定清單樣式,使用 1 行 CSS 來變更清單項目符號:
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
這雖然方便,但我們需要更多功能。或是變更顏色、大小、間距等項目呢?這時 ::marker
就能派上用場。能讓您個別和全域指定 CSS 提供的虛擬元素:
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
list-style-type
屬性可能提供非常有限的樣式設定。::marker
虛擬元素代表可以指定標記本身,並直接套用樣式。進一步掌控自己的資料。
也就是說,您無法在 ::marker
上使用每個 CSS 屬性。規格中會清楚載明允許和禁止使用的屬性清單。如果您對這個虛擬元素感興趣,但無法成功執行,請參考以下清單,瞭解 CSS 可以/不可以使用的功能:
允許的 CSS ::marker
屬性
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
變更 ::marker
的內容是使用 content
,而不是 list-style-type
。在下一個範例中,第一個項目使用 list-style-type
設定樣式,第二個項目則使用 ::marker
設定樣式。第一個案例的屬性適用於整個清單項目,而不只是標記,也就是說,文字會同時為動畫和標記。使用 ::marker
時,我們只能指定標記方塊,不能指定文字。
另請注意,不允許的 background
屬性沒有任何作用。
li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
li:nth-child(2)::marker { content: '!'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
變更標記的內容
您可透過下列幾種方式設定標記樣式。
變更所有清單項目
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
只變更一個清單項目
li:last-child::marker {
content: "😍";
}
將清單項目變更為 SVG
li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
變更編號清單
那 <ol>
呢?根據預設,已排序清單項目上的標記是數字,而非項目符號。在 CSS 中,這些資產稱為計數器,十分強大。他們甚至可以使用屬性設定和重設數字開始和結束的位置,或是切換為羅馬數字。我們可以換個風格嗎?沒錯,我們甚至可以使用標記內容值,製作專屬的編號呈現方式。
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
偵錯
Chrome 開發人員工具可協助您檢查、偵錯及修改套用至 ::marker
虛擬元素的樣式。
未來的虛擬元素樣式
你可以前往下列主題進一步瞭解::marker
:
- Smashing Magazine 的 CSS 清單、標記和計數器
- CSS-Tricks 提供的 Counting With CSS Counters 和 CSS Grid
- 透過 MDN 使用 CSS 計數器
想要獲得難以展現風格的事物,是一件好事。您可能會希望設定其他自動產生的元素樣式。<details>
或搜尋輸入自動完成指標的操作難免會因為不同瀏覽器中實作方式而感到不悅。如要分享需求,其中一種方法是前往 https://webwewant.fyi 建立。