动态修改after或before的content
在html元素上有个data-*的自定义数据属性的属性,它使我们可以在html上嵌入自己的数据,在dom和css内都可以获取到。
这里我们就利用这个数据为content动态赋值
<div class="test-data" data-test="heihei"></div>
<style>
.test-data {
width: 200px;
height: 200px;
background: #00FFF00;
}
.test-data::before {
content: attr(data-test);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
参考:动态设置伪元素值
上次更新: 2025/09/05, 8:09:00