css attr

2022-12-19

前端

过于大方的施舍会导致盗窃——西塞罗

分享一个css函数attr

MDNhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/attr

attr可以获取我们标签内的属性作为值

例如:

1
<p data-foo="hello">world</p>

css

1
2
3
[data-foo]::before {
content: attr(data-foo) " ";
}

效果:

world

除了data-*的自定义属性,也可以获取其他的,例如custom-prefix

1
2
3
4
5
6
<style>
[custom-prefix]::before {
content: attr(custom-prefix);
}
</style>
<p custom-prefix="hello">world</p>

world

或者是class类名等

1
2
3
4
5
6
<style>
.hello::before {
content: attr(class) " ";
}
</style>
<p class="hello">world</p>

world