在开发前端页面的时候，我们可能需要给某些内容做标记，比如某段文字的关键词、一些特殊的信息等。而在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伪元素可以为文本添加标记。虽然目前该特性的兼容性有些问题，但是在兼容的浏览器中，它可以为我们的页面带来很多便利。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/288691.html
微信扫一扫 
支付宝扫一扫 