在我的页面的顶部，我有一堆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。