在开发前端页面的时候,我们可能需要给某些内容做标记,比如某段文字的关键词、一些特殊的信息等。而在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
伪元素可以为文本添加标记。虽然目前该特性的兼容性有些问题,但是在兼容的浏览器中,它可以为我们的页面带来很多便利。