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配合计算属性countercounter-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调试

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值