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

分享一个css函数attr

MDN：https://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