css attr

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

分享一个css函数attr

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr

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

例如：

代码语言：javascript复制

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

css：

代码语言：javascript复制

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

效果：

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

world

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

代码语言：javascript复制

<style>
[custom-prefix]::before {
  content: attr(custom-prefix);
}
</style>
<p custom-prefix="hello">world</p>

[custom-prefix]::before { content: attr(custom-prefix); }

world

或者是class类名等

代码语言：javascript复制

<style>
.hello::before {
  content: attr(class) " ";
}
</style>
<p class="hello">world</p>

.hello::before { content: attr(class) " "; }

world

css

0 人点赞