CSS Marker

在開發前端頁面的時候，我們可能需要給某些內容做標記，比如某段文字的關鍵詞、一些特殊的信息等。而在CSS中，我們可以使用Marker來實現這個功能。CSS Marker可以用自定義的樣式去標記文本或者為列表項添加標誌。本文將詳細介紹CSS Marker的用法和效果。

一、::marker偽元素

在CSS3中新增了一個偽元素::marker，它可以用來設置列表項的標誌。在使用::marker偽元素時，我們需要為list-style-type設為none，然後再通過樣式來設置對應的標誌。

示例代碼：

/* 將列表樣式設為none */
ul {
  list-style-type: none;
}

/* 使用::marker偽元素添加標誌 */
li::marker {
  content: "●";
  color: red;
}

上面的代碼中，我們將::marker偽元素應用在<li>標籤上，設定標誌的內容為”●”，顏色為red。效果如下：

• 列表項1
• 列表項2
• 列表項3

二、給文本添加標記

除了給列表項添加標誌，我們也可以使用CSS Marker給文本添加標記。這個功能可以在一些特殊場景下使用，比如強調某段文字的關鍵詞。

示例代碼：

/* 使用::before偽元素添加標記 */
mark::before {
  content: "★";
  color: #ffc107;
}

上面的代碼中，我們將::before偽元素應用在<mark>標籤上，設定標記的內容為”★”，顏色為#ffc107。效果如下：

這是一段需要強調的關鍵詞

三、::marker的兼容性

目前，::marker偽元素正在逐漸被瀏覽器支持，但是仍然有些瀏覽器不支持該特性。

在iOS的Safari瀏覽器中，::marker偽元素需要設置一些額外的樣式才能正確渲染。我們需要為列表項設定display: list-item和perspective: 1px的樣式：

示例代碼：

/* 在iOS Safari中使用::marker需要額外的樣式 */
li {
  display: list-item;
  perspective: 1px;
}

/* 使用::marker偽元素添加標誌 */
li::marker {
  content: "●";
  color: red;
}

結論

CSS Marker是一個很有用的CSS特性，它可以幫助我們在頁面中添加標記，更好的突出特殊內容。使用::marker偽元素可以為列表項添加自定義的標誌，而使用::before偽元素可以為文本添加標記。雖然目前該特性的兼容性有些問題，但是在兼容的瀏覽器中，它可以為我們的頁面帶來很多便利。