最近研究css,总是跑掘金思否看大佬案例,从中发现了一个好玩的东西:通过html自定义属性传参,css伪元素接受这个参数,听起来是不是很酷,原来还可以这样传数据哇!
案例:我们通过data-*自定义属性,给div绑定一个char的属性值为:abc,我们看看css怎么接受
html传递:
<div class="box" data-char="abc">
abc
</div>
css接受:
.box::before{content:attr(data-char);display: block;position: absolute;right: 0;bottom: 0;color: red;}
attr?什么玩意?CSS2官方解释:attr() 函数返回选择元素的属性值。
这也是能通过css接受参数的关键了
效果图如下:
![](https://img-blog.csdnimg.cn/img_convert/ac9626a380fb785637d26c66cfd6d629.png)