为什么伪元素中不继承 CSS 变量？

Question

我发现了一些奇怪的东西，并且在 CSS 自定义属性规范中找不到任何相关内容。这是一个简单的例子：https ://codepen.io/bakura10/pen/RwxNPxz

:root {
  --background: red;
}

.test {
  position: relative;
}

.test::before {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--background);
}

<div class="test">
  TEST
</div>

正如您所看到的，尽管变量 --background 是在根范围定义的，但它根本无法从 before 或 after 伪元素访问。

为什么会这样？

Answer 1

不，它正在工作，你应该给出你的:before position:absolute（它没有任何宽度或高度）。

:root {
  --background: red;
}

.test {
  position: relative;
/*   background: var(--background); */
}

.test::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
/*   background-color: red; */
  background: var(--background);
}

<div class="test">
  TEST
</div>