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伪元素可以为文本添加标记。虽然目前该特性的兼容性有些问题，但是在兼容的浏览器中，它可以为我们的页面带来很多便利。