在我的页面顶部，我有一堆 CSS 自定义属性，它们适用于我的所有样式表，但是，当我尝试通过::before/::after伪元素访问它们时，Chrome 指出该变量未定义。
举个例子：
<head>
...
<style>
:root {
--my-variable: #ff0000;
}
</style>
</head>
在我的样式表中：
.box {
background-color: var(--my-variable); // Works fine
}
.box::after {
background-color: var(--my-variable); // --my-variable is not defined
}
只是想知道我是否错过了什么？
我也刚刚注意到它在 Firefox 上运行良好，所以也许这是一个错误？
更新：看来CSS属性不是在伪元素中继承的，所以需要根据这个答案直接设置
工作示例：
:root, *::before, *::after {
--my-property: xyz;
}
我正在尝试使用自定义 CSS 属性更改dialog元素的背景颜色，backdrop但它不会。这是 Chrome 中的错误还是有原因？
document.querySelector('dialog').showModal();:root {
--color-backdrop: red;
}
dialog::backdrop {
background: var(--color-backdrop);
}<dialog><p>This is a dialog. My backdrop should be red.</p></dialog>