在我的页面的顶部,我有一堆CSS自定义属性,它们在我所有的样式表中都可以工作,但是,当我试图通过::before
/::after
伪元素访问它们时,Chrome声明该变量未定义。
例如:
<head>
...
<style>
:root {
--my-variable: #ff0000;
}
</style>
</head>
在我的stylesheets中:
.box {
background-color: var(--my-variable); // Works fine
}
.box::after {
background-color: var(--my-variable); // --my-variable is not defined
}
只是想知道我是不是错过了什么?
我也注意到它在Firefox上运行得很好,所以也许这是一个bug?
更新:看起来CSS属性在伪元素中没有被继承,所以它需要按照this answer直接设置
工作实施例:
:root, *::before, *::after {
--my-property: xyz;
}
1条答案
按热度按时间2ledvvac1#
你必须确保在定义了::before或::after的伪元素之后,你必须用不同于
none
的任何值定义它的类css属性content
。