类似问题的答案可能对https://stackoverflow.com/a/63322762/561959有所帮助
伪元素并不从：root继承变量，听起来你需要把它们添加到定义它们的列表中，例如：

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

定义两次

现在，据我所知，你必须定义他们两次，不幸的是，绝对可以有一个最佳实践，但我找不到一个，所以这个设置为我工作。
我将我的css变量/自定义属性添加到特定的选择器中，这样它们就可以在每个元素选择器中进一步修改，同时检查每个元素并让您的css变量/自定义属性与您的选择器一起显示也会稍微容易一些。
使用像sass/scss这样的预处理器会有很大帮助。我对这种技术的使用太长了，无法全部展示，但这就是方法。

// Make a mixin so its easy to repeat
// css vars/ custom properties
@mixin css-vars($var){
   --var-bg: #{$var};
}

// Defined before using @include
$var: #fff;

.example {

  // vars will be available to children of .example
  @include css-vars($var);

  // Unfortunately you need to now specify
  // your targeted ::pseudo elements and include
  &::before,
  &::after {
    @include css-vars($var);
    background: var(--var-bg);
  }

}

它将输出：

.example {
  --var-bg: #fff;
}
.example::before, .example::after {
  --var-bg: #fff;
  background: var(--var-bg);
}

它们是可访问的，但是为了在伪元素上看到它们，您必须将它们应用到伪元素上。
请参见文档中的如何用途：根变量：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
下面是如何使用伪元素：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
您可以在代码上尝试类似这样的操作：

a::before {
   content: "";
   width: 50px;
   height: 50px;
   display: block;
   background-color: var(--site-primary-color);
}