css�::marker标记是什么?怎样使用?
Admin 2021-10-11 群英技术资�
css�::marker标记是什么?怎样使用?一些朋友可能对::marker标记的作用及使用不是很了解,因此这篇文章就给大家来介绍一�::marker标记,下文有示例及详细的介绍,接下来就跟随小编来学习一下吧�
::marker 是什�
::marker
是一个标记伪元素,能够定义内容填充在list-item
上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用�
<style> li::marker { content: "(" counter(list-item) ")"; } li { display: list-item; } </style> <ul> <li>zhaodao88.com 找商�</li> <li>zhaodao88.com 找人�</li> <li>zhaodao88.com 找采�</li> </ul>
效果图:
在这里,marker
为元素定义的是每一项列表项前面的标记符,在伪元素内�content
的内容就是要在列表项前面所填充的内容�
使用::marker填充标记内容
需要注意的是,普通元素要想使�marker
,必须将元素定义�display: list-item
�list-items
在创建的时候会自动生成marker
�counter
�
标记的样式可以使�list-style-type
� list-style-image
属性或者直接使�::marker
伪元素进行样式编写。下面展示一个例子�
�::marker
伪元素对标记进行控制,伪元素�content
的内容就是标记符的内�
<style> p { margin-left: 12 em; } p.note { display: list-item; counter-increment: note-counter; } p.note::marker { content: "Note " counter(note-counter) ":"; color: blue; font-weight: bold; } </style> <p>zhaodao88.com 找商�</p> <p class="note">zhaodao88.com 找采�</p> <p>zhaodao88.com 找人�</p>
效果如图:
当然也可以为标记设置字体样式、颜色等属性,类似上面效果li::marker { color: blue; font-weight:bold; }
值得注意的是:目前只有以下属性能够作用于marker
伪元素上
�issue提出,在标记使用white-space: pre
可能不会有很好的效果,可以尝�text-space-collapse: preserve-spaces
�text-space-trim: discard-after
一起使用,更能达到想要的效果,感兴趣的请移� issue 4448�issue 4891
使用list-style-image图像填充标记内容
指定标记图像,当列表项内容正常时,用指定图像填充列表项的标记�
list-style-image
正常取� <image> | none
,未定义情况下是 none
,作用在列表�list-items
下。其�<image>
用于指定标记图像�url
。参考链接移�
下面是使用例子,将会�<li>
标签的标记块填充上指定链接的ellipse.png
图像
li { list-style-image: url("https://www.example.com/ellipse.png") }
使用list-style-type文本类型填充标记内容
指定标记字符串,当列表项内容正常时,用指定字符串填充列表项的标记�
list-style-type
正常取� <counter-style> | <string> | none
,未定义情况下是 disc(圆形标记�)
,作用在列表�list-items
下。参考链接移�
<counter-style>
是CSS 定义的计数器样式,允许开发者自定义counter
的样式。比如:
@counter-style thumbs { system: cyclic; symbols: "\1F44D"; suffix: " "; } ul { list-style-type: thumbs; }
具体<counter-style>
定义规则参�
下面是关�list-style-type
的使用例�(如果作用元素不是列表元素,则元素的display必须设置为list-item)
ul { list-style-type: ""; } // 使用""作为标记� p.note { // 如果作用元素不是列表元素,则元素的display必须设置为list-item display: list-item; list-style-type: "Note: "; list-style-position: inside; } ol { list-style-type: upper-roman; } // 定义为罗马数字的大写形式 ul { list-style-type: symbols(cyclic '�' '�'); } // 标记符在'�'�'�'之间切换 ul { list-style-type: none; } // 不显示标�
注意
::marker
伪元素标记不是所有浏览器都支持,包括chrome
也只是在80以上版本通过启用experimental Web Platform
才支持,如果你想要测试效果,请前往chrome://flags
启用experimental Web Platform
。并不推荐在实际项目去使用这条规则,更推荐使用常规的做法去设置标记块样式�
总结
列表在前端项目中很常见,应用场景也十分广泛。个人觉得,::marker
伪元素是�list-style-image
�list-style-text
的补充,三者都是定义标记块的填充内容,image
注重图像�text
注重字符串,::marker
则可以定font
�color
等样式,各具特色�
关于css�::marker标记的内容就介绍到这,上述实例具有一定的借鉴价值,感兴趣的朋友可以参考学习,希望能对大家有帮助,想要了解更多::marker标记的内容,大家可以关注群英网络其它相关文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了CSS实现子元素div水平垂直居中的示�,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了深入理解CSS @font-face性能优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章给大家分享的是CSS3中怎样取消加粗文本的方法。在CSS3中,font-weight是设置文本粗细的,想要取消文本的加粗效果,那么给设置属性值为normal就可以了,接下来我们来看看具体的实现及代码是怎样的�
在css中,可以利用“overflow-x”属性来禁止页面的左右滚动条,当该属性的值为“hidden”时,可以将超出左右边缘的元素内容隐藏起来,进而禁止页面左右滚动条的显示;语法为“body{overflow-x:hidden;}”�
这篇文章给大家分享的是CSS实现两栏布局的内容,主要是实现左边固定,而右边自适应的效果,这种两栏布局的效果还是挺实用的,因此分享给大家做个参考,文中示例代码介绍的很详细,感兴趣的朋友接下来一起跟随小编看看吧�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078