使用CSS ::marker的自定義項目符號詳情 - 前端,css,css技巧杭州程序員張張博客

現在，在使用 <ul> 或 <ol> 時自定義數字或項目符號的顏色，大小或類型很簡單。

感謝CSS ::marker，我們可以更改內容以及項目符號和數字的某些樣式。

瀏覽器兼容性

當Chromium 86發佈時，::marker 將在桌面和Android的Firefox、桌面Safari和iOS Safari以及基於Chromium的桌面和Android瀏覽器中得到支持。有關更新，請參見MDN的瀏覽器兼容性表。

偽元素

考慮以下基本HTML無序列表：

<ul>
  <li>深網｜美團的頭號創業項目：王興發話“這場仗一定要打贏”</li>
  <li>外媒：華為受美國製裁出現轉折，美國或允許部分公司提供非5G零件</li>
  <li>iPhone12不到一週就破發 經銷商：辦5G套餐能降1300多元</li>
  <li>威馬汽車自燃事件續：官方承認缺陷電池並召回，佔總銷量3.6％</li>
  <li>iPhone 背後的濃濃塑料情：富士康薅蘋果羊毛，庫克偷偷找備胎</li>
</ul>

我們知道會渲染成下面的樣子

每個 <li> 項開頭的都有一個點。

今天我們很興奮地討論一下 ::marker 偽元素，瀏覽器為你創建的項目符號元素設置樣式。

關鍵術語：偽元素表示文檔中除文檔樹中存在的元素以外的元素。例如，您可以使用偽元素 p::first-line 來選擇段落的第一行，即使沒有任何HTML元素包裝這行文本。

創建一個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>深網｜美團的頭號創業項目：王興發話“這場仗一定要打贏”</dt>
  <dd>L外媒：華為受美國製裁出現轉折，美國或允許部分公司提供非5G零件</dd>
  <dd>iPhone12不到一週就破發 經銷商：辦5G套餐能降1300多元</dd>

  <dt>威馬汽車自燃事件續：官方承認缺陷電池並召回，佔總銷量3.6％</dt>
  <dd>iPhone 背後的濃濃塑料情：富士康薅蘋果羊毛，庫克偷偷找備胎</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

marker樣式

在使用 ::marker 之前，列表可以使用 list-style-type 和 list-style-image 來改變列表項的符號，只需使用一行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;
}

警告：如果上面的列表沒有粉紅色的項目符號，則您的瀏覽器不支持 ::marker。

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 屬性是沒有效果的。

List Style

li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

Marker Styles

li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

更改marker的內容

以下是一些樣式標記的方法。

更改所有列表項

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中，這些功能稱為Counters，功能非常強大。它們甚至有屬性來設置和重設數字的開始和結束位置，或者將它們切換為羅馬數字。我們可以給它設計樣式嗎？是的，我們甚至可以使用 marker content 值來構建我們自己的編號表示。

li::marker {
  content: counter(list-item) "› "; 
  color: hotpink;
}

調試

Chrome DevTools隨時可以幫助你檢查，調試和修改應用於 ::marker 偽元素的樣式。

未來的偽元素樣式

您可以從以下位置找到有關 ::marker 的更多信息：

CSS Lists, Markers and Counters from Smashing Magazine
Counting With CSS Counters and CSS Grid from CSS-Tricks
Using CSS Counters from MDN

能接觸到一些一直難以樣式化的東西，真是太好了，你可能會希望你能對其他自動生成的元素進行樣式設計。你可能會對 <details> 或搜索輸入自動完成指示器感到沮喪，這些東西在各瀏覽器中的實現方式並不相同。

原文：https://web.dev/css-marker-ps...

微信搜索【前端全棧開發者】關注這個脱髮、擺攤、賣貨、持續學習的程序員，第一時間閲讀最新文章，會優先兩天發表新文章。關注即可大禮包，準能為你節省不少錢！

杭州程序員張張博客

杭州程序員張張博客

博客 / 詳情