使用伪元素before after 接收标签中 data-*属性数据

最新推荐文章于 2023-04-26 17:30:01 发布

GYB4979

最新推荐文章于 2023-04-26 17:30:01 发布

阅读量412

点赞数

分类专栏： html css 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/GYB4979/article/details/121444106

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

HTML5 新增了data-* 属性可以在标签中定义我们的参数
而伪元素::before 或::after 可以直接接收data-*自定义参数

看效果图
在这里插入图片描述

在伪元素的content属性中 直接attr()括号内写接收参数 


<body>
    <div class="my" data-name="隔壁老王" data-car="小鹏P7">买了</div>

    <style>
        .my::before {
            content: attr(data-name);  //直接content(接收参数)
            color: green;
        }
        .my::after {
            content: attr(data-car);
            color: silver;
        }
    </style>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

GYB4979

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用伪元素before after 接收标签中 data-*属性数据

HTML5 新增了data-* 属性可以在标签中定义我们的参数而伪元素::before 或::after 可以直接接收data-*自定义参数看效果图在伪元素的content属性中直接attr()括号内写接收参数 <body> <div class="my" data-name="隔壁老王" data-car="小鹏P7">买了</div> <style> .my::before {
复制链接

扫一扫