如何理解css伪元素marker？如何自定义li的小圆点？

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

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

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

如果自定义的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伪元素。

相关文章

• https://newsn.net/say/css-selector.html
• https://newsn.net/say/css-box-sizing.html
• https://newsn.net/say/css-content-attr.html
• https://newsn.net/say/css-calc.html

综述

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

• https://newsn.net/tag/css/

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