html传参,css接受?What 弄啥嘞?

最近研究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接受参数的关键了

效果图如下: