我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文描述一个css的新的伪元素::marker,常见的伪元素是::before或者::after。这个新的::marker伪元素具体是用来控制什么的呢?本文就对这个::marker伪元素做个简单的探索。

苏南大叔:如何理解css伪元素marker?如何自定义li的小圆点? - css伪元素marker
如何理解css伪元素marker?如何自定义li的小圆点?(图3-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文中的css伪元素::marker,适用于列表的情况,通俗的来说,就是用来控制li前面那个小点的样式的。本文测试环境:win10chrome@104.0.5112.81

普通用法

基本上就是用来控制文字列表中前面那个小圆圈的,通常来说就是li标签。如果想要更换其它的表现样式,其实就是修改父元素的list-style。举例如下:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<style>
    ul {
        list-style:circle;
    }
</style>

系统默认的这个修饰符样式很多,大家可以自行试试。如果使用f12查看这个修饰符的话,就会看到它就是一个::marker。所以,当系统提供的样式不够用,不符合想法的时候,就可以定义这个::marker伪元素的content

<style>
    li::marker {
        content: '▶';
        color:red;
        font-size: 3px;
    }
</style>

苏南大叔:如何理解css伪元素marker?如何自定义li的小圆点? - marker-1
如何理解css伪元素marker?如何自定义li的小圆点?(图3-2)

如果自定义的content太长了,就可能会显示不全。如果你有这样的疑虑的话,可以考虑下面的定义:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<style>
    ul {
        list-style:none;
        list-style-position:inside;
        padding:0px;
    }
    li::marker {
        content: '▶=====超级长=====>';
        color:red;
    }
</style>

进阶用法

进阶用法的话,任何具有display: list-item;属性的元素,都可以控制。测试代码如下:

<div class="marker">
    div修改display为list-item之后
</div>
<style>
    div.marker {
        display: list-item;
        list-style-position: inside;
    }
    div.marker::marker {
        content: '▶';
    }
</style>

重点就是一句话:display: list-item;,拥有这个属性的任何元素都可以定义::marker伪元素。

苏南大叔:如何理解css伪元素marker?如何自定义li的小圆点? - marker-2
如何理解css伪元素marker?如何自定义li的小圆点?(图3-3)

相关文章

综述

个人而言,认为这个::marker伪元素并不是很好用。个人还是倾向于使用传统的定义元素背景图片的方式,来实现这个小圆点的自定义功能。更多css的文章,请点击:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css