CSS::marker让文字序号不再呆板

本文介绍CSS新增的伪元素:marker,它可以改变文字序号样式。

什么是::marker

::marker是在CSS Lists Module Level 3提出，于CSS Pseudo-Elements Level 4完善。**Chrome86+**对::marker开始支持。

元素标签<li>,<summary>,它们display默认为list-item,即会带有呆板的文字序号

<ol>
    <li>::marker</li>
    <li>::before</li>
    <li>::after</li>
</ol>
<ul>
    <li>::marker</li>
    <li>::before</li>
    <li>::after</li>
</ul>

使用::marker可以改变默认的文字序号

<style>
    li::marker{
        color: rgb(219, 93, 20);
    }
</style>


<ol>
    <li>::marker</li>
    <li>::before</li>
    <li>::after</li>
</ol>
<ul>
    <li>::marker</li>
    <li>::before</li>
    <li>::after</li>
</ul>

::marker的一些限制

使用::marker时，只能使用某些css属性:

• 所有的font字体属性
• color
• content

元素标签使用::marker,需要将display设置成list-item,否则::marker不起作用。

::marker应用探索

标题前缀

<style>
   h1 {
            display: list-item;
            padding-left: 8px;
            max-width: 800px;
            margin: auto;
            margin-top: 15px;
        }

        .title::marker {
            content: '▍';
            color: rgb(189, 63, 63);
        }

        .emoji::marker {
            content: "㊗️";
        }
</style>

<h1 class="title">中国***100年生日快乐</h1>
<h1 class="emoji">中国***100年生日快乐</h1>

或者使用emoji表情

CodePen Demo–::marker example

动态改变

<style>
    li:hover {
         color: rgb(241, 208, 97);
    }

    li::marker {
        content: "😠";
    }

    li:hover::marker {
        content: "🤒";
    }
</style> 
<ul>
        <li>face with medical mask</li>
        <li>face with thermometer</li>
        <li>angry face</li>
    </ul>

CodePen Demo–::marker example

配合counter

::marker配合计算属性counter，counter-increment完成一个自动递增的列表

counter详细介绍

<style>
 .view {
     counter-reset: h3;
    }

    div {
        padding: 0 80px;
    }

    h3 {
        display: list-item;
        counter-increment: h3;
    }

    h3::marker {
        content: "✔"counter(h3) "  ";
        color: rgb(243, 182, 69);
  }

</style>

<div class="view">
        <div>
            <h3>Lorem ipsum dolor</h3>
            <p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p>
        </div>
        <div>
            <h3>Itaque sequi eaque earum </h3>
            <p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p>
        </div>
        <div>
            <h3>Laudantium sapiente </h3>
            <p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p>
        </div>
    </div>

CodePen Demo–::marker example

最后

不要忘记点赞，微信公众号搜索隔壁姥爷。

往期文章

深入剖析This机制

看完这篇，让您的js优雅一个档次

多个Vue项目如何配置nginx

重学Vue Components

前端Vue+axios实现阿里云oss文件上传(服务端签名直传)

前端奇技淫巧之js调试