:root 变量在 :before 元素上不可用

Question

我将很多 CSS 变量分配给 :root 但这些变量在我的 :before 元素中无法访问。我在网上找不到任何关于此的信息。

当检查 :before 元素的父元素时，我在谷歌开发工具的样式面板底部看到所有 :root 变量。请参阅下面的屏幕截图。

我的CSS

    &__meta {
    padding: 10px 0;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--text-color);

    &-author {
        margin-right: 15px;
    }
    &-primary-cat:before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: var(--text-color);
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
    }
}

Chrome 开发工具父 CSS

Chrome 开发工具 :before CSS - 除背景颜色之外的所有样式均按预期应用于 :before 元素

Answer 1

类似问题的答案可能会有所帮助：CSS 变量在dialog::backdrop 中不起作用

伪元素不从 :root 继承变量。听起来您需要将它们添加到定义它们的列表中，例如

:root,
::after,
::before {
    /* Your variables*/
}