使用 CSS 的自訂項目符號 ::marker

現在使用 <ul> 或 <ol> 時，可以輕鬆自訂顏色、大小，或是數字/項目符號類型。

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

多虧於 Bloomberg 贊助的 Igalia，我們終於能大肆利用小訣竅，提供樣式清單。看看！

查看原始碼

有了 CSS ::marker，我們就能變更內容以及項目符號和數字樣式。

瀏覽器相容性

::marker 適用於電腦版和 Android 版、電腦版 Safari 和 iOS Safari (但僅限 color 和 font-* 屬性，請參閱「錯誤 204163」)，以及以 Chromium 為基礎的電腦和 Android 瀏覽器。

瀏覽器支援

  • 86
  • 86
  • 68
  • 11.1

資料來源

虛擬元素

請參考以下重要的 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：

想要獲得難以展現風格的事物，是一件好事。您可能會希望設定其他自動產生的元素樣式。<details> 或搜尋輸入自動完成指標的操作難免會因為不同瀏覽器中實作方式而感到不悅。如要分享需求，其中一種方法是前往 https://webwewant.fyi 建立。