本篇文章给大家介绍一下有趣、比较有意思的css3伪元素 ::marker，使用它可以让我们的列表序号变得更加的有意思，更生动。感兴趣的就来和我一起来看看吧！
什么是 ::marker
CSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3 开始新增，CSS Pseudo-Elements Level 4 中完善的一个比较新的伪元素，从 Chrome 86+ 开始得到浏览器的支持。【学习视频分享：css视频教程】
利用它，我们可以给元素添加一个伪元素，用于生成一个项目符号或者数字。
正常而言，我们有如下结构：
立即学习“前端免费学习笔记（深入）”；
- Contagious
- Stages
- Pages
- Courageous
- Shaymus
- Faceless
默认不添加任何特殊的样式，它的样式大概是这样：
利用 ::marker 我们可以对序号前面的小圆点进行改造：
li { padding-left: 12px; cursor: pointer; color: #ff6000;}li::marker { content: '>';}
就可以将小圆点改造成任意我们想要的：
::marker 伪元素的一些限制
首先，能够响应 ::marker 的元素只能是一个 list item，譬如 ul 内部的 li，ol 内部的 li 都是 list item。
当然，也不是说我们如果想在其他元素上使用就没有办法，除了 list item，我们可以对任意设置了 display: list-item 的元素使用 ::marker 伪元素。
其次，对于伪元素内的样式，不是任何样式属性都能使用，目前我们只能使用这些：
all font properties — 所以字体属性相关color — 颜色值the content property — content 内容，类似于 ::before 伪元素 的 content，用于填充序号内容text-combine-upright (en-US), unicode-bidi and direction properties — 文档书写方向相关
::marker 的一些应用探索
譬如我们经常见到标题前面的一些装饰：
或者，我们还可以使用 emoji 表情：
都非常适合使用 ::marker 来展示，注意用在非 list-item 元素上需要使用 display: list-item：
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
CodePen Demo — ::marker examplehttps://codepen.io/Chokcoco/pen/eYvZmpW
::marker 是可以动态变化的
有意思的是，::marker 还是可以动态变化的，利用这点，可以简单制作一些有意思的 hover 效果。
譬如这种，没被选中不开心，选中开心的效果：
CodePen Demo — ::marker examplehttps://codepen.io/Chokcoco/pen/eYvZmpW
搭配 counter 一起使用
可以观察到的是，::marker 伪元素与 ::before、::after 伪元素是非常类似的，它们都有一个 content 属性。
在 content 里，其实是可以作用一些简单的字符串加法操作的。利用这个，我们可以配合 CSS 计数器 counter-reset 和 counter-increment 实现给 ::marker 元素添加序号的操作。
对
counter-increment还不算很了解的可以移步这里：MDN — counter-increment
假设我们有如下 HTML：
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Itaque sequi eaque earum laboriosam.
Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?
Laudantium sapiente commodi quidem excepturi!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
我们利用 ::marker 和 CSS 计数器 counter-increment 实现一个自动计数且 h3 前面带一个 emoji 表情的有序列表：
body { counter-reset: h3;}h3 { counter-increment: h3; display: list-item;}h3::marker { display: list-item; content: "✔" counter(h3) " "; color: lightsalmon; font-weight: bold;}
效果如下，实现了一个自动给 ::marker 元素添加序号的效果：
CodePen Demo — ::marker example
https://codepen.io/chriscoyier/pen/ExNWmee
最后
本文介绍了什么是 ::marker 以及它的一些实用场景，可以看出虽然 ::before 、::after 也能实现类似的功能，但 CSS 还是提供了更具有语义化的标签 ::marker，也表明了大家需要对自己的前端代码（HTML/CSS）的语义化更加注重。
好了，本文到此结束，希望对你有帮助 :)
更多编程相关知识，请访问：编程视频！！
以上就是分享一个有趣的CSS3伪元素::marker，它使列表序号更生动的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621979.html
微信扫一扫 
支付宝扫一扫 
