css伪元�::marker是什么?如何使用�
Admin 2021-09-28 群英技术资�
今天给大家分享的是css伪元�::marker的内容,本文会给大家介绍css伪元�::marker是什么�::marker的使用和一些实用的场景,需要的朋友可以参考,接下来就跟随小编来学习一下吧�
CSS 伪元� ::marker
是从 CSS Pseudo-Elements Level 3 开始新增,CSS Pseudo-Elements Level 4 中完善的一个比较新的伪元素,从 Chrome 86+ 开始得到浏览器的支持�
利用它,我们可以给元素添加一个伪元素,用于生成一个项目符号或者数字�
正常而言,我们有如下结构�
<ul> <li>Contagious</li> <li>Stages</li> <li>Pages</li> <li>Courageous</li> <li>Shaymus</li> <li>Faceless</li> </ul>
默认不添加任何特殊的样式,它的样式大概是这样�
利用 ::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
伪元素�
其次,对于伪元素内的样式,不是任何样式属性都能使用,目前我们只能使用这些�
::marker 的一些应用探�
譬如我们经常见到标题前面的一些装饰:
或者,我们还可以使� emoji 表情�
都非常适合使用 ::marker
来展示,注意用在� list-item
元素上需要使� display: list-item
�
<h1>Lorem ipsum dolor sit amet</h1> <h1>Lorem ipsum dolor sit amet</h1>
h1 { display: list-item; padding-left: 8px; } h1::marker { content: '-'; } h1:nth-child(2)::marker { content: ''; }
CodePen Demo -- ::marker example
有意思的是,::marker
还是可以动态变化的,利用这点,可以简单制作一些有意思的 hover 效果�
譬如这种,没被选中不开心,选中开心的效果�
li { color: #000; transition: .2s all; } li:hover { color: #ff6000; } li::marker { content: ''; } li:hover::marker { content: ''; }
CodePen Demo -- ::marker example
可以观察到的是,::marker
伪元素与 ::before
�::after
伪元素是非常类似的,它们都有一� content
属性�
� content
里,其实是可以作用一些简单的字符串加法操作的。利用这个,我们可以配合 CSS 计数� counter-reset
� counter-increment
实现� ::marker
元素添加序号的操作�
� counter-increment
还不算很了解的可以移步这里:MDN -- counter-increment
假设我们有如� HTML�
<h3>Lorem ipsum dolor sit amet.</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <h3>Itaque sequi eaque earum laboriosam.</h3> <p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p> <h3>Laudantium sapiente commodi quidem excepturi!</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
我们利用 ::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
最后,可以看出虽然 ::before �::after 也能实现类似的功能,� CSS 还是提供了更具有语义化的标签 ::marker,也表明了大家需要对自己的前端代码(HTML/CSS)的语义化更加注重�
关于css伪元�::marke是什么及使用就介绍到这,上述代码有一定的借鉴价值,感兴趣的朋友可以参考学习,希望能对大家有帮助,想要了解更多css伪元素的内容,大家可以关注群英网络其它相关文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
CSS弹窗怎样实现增加遮罩层,方法是什么?在实际的项目中,对于弹窗的使用是很常见的,这篇我们主要来看用CSS3实现带遮罩层的弹窗效果,这里需要使用到,target伪类�::before �::after伪元素。实现代码及效果如下,感兴趣的朋友可以参考�
本篇文章主要介绍了CSS3的颜色渐变效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
移动端动画用什么实现好?一些站长在做移动端网站时,想要做动画的效果,而制作动画效果的方法有css,jquery,canvas,那么究竟选择哪个实现好呢?另外,对于css3在移动端出现卡顿问题,我们又该如何解决?
这篇文章主要介绍了css中引入指定字体@font-face兼容各浏览器的问�,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
本文用示例介绍CSS进行九宫格布局的方法� 朋友圈、微博等很多社交平台都是使用九宫格布局来展示图片的,九宫格布局也是前端面试经常会问的问题�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078