Javascript CSS伪类在通过JS更新变量值后消失

我希望能够通过JS更新CSS变量，但是当我更新变量时，CSS伪元素会被破坏，即消失

以下是SCSS代码：

:root {
  --test-thing: "";
}

.folder-1-open span::after {
    width: 90%;
    height: 85%;
    bottom: 0;
    left: 5%;
    background-color: #fff;
    z-index: 3;
    content: var(--test-thing);
}

我正试图操纵这个变量：

const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")

上面的CSS在它所应用的标签元素上工作得非常好，基本上只是一个白色的正方形，但是只要我尝试更新CSS变量-test东西，通过content prop添加一个字符串，整个事情就消失了

是否可以使用伪元素

通过对相关帖子的研究，我的理解是使用CSS变量是可能的

---

在上下文中，当纯CSS交互文件夹打开时，我希望动态更新内容。

好的，我已经找到了发生这种情况的原因。仍然不能100%确定原因，但这与新值不在引号中这一事实有关。只需将值加引号，它就可以正常工作

const root=document.documentElement

---

root.style.setProperty'-test'，'helloworld'/好的，我已经知道为什么会发生这种情况了。仍然不能100%确定原因，但这与新值不在引号中这一事实有关。只需将值加引号，它就可以正常工作

const root=document.documentElement

---

root.style.setProperty'-test'，Hello World'//这很奇怪。。。伪元素完全消失。。。我会设法弄明白为什么…这很奇怪。。。伪元素完全消失。。。我将试图找出原因…我的猜测是setProperty会删除引号本身-这是有意义的；毕竟，如果它只是将所有内容都保留为字符串，那么您将无法设置px值，例如，因为它最终会显示类似于min-width的内容：“100px”而不是min-width:100px。也许是这样，为什么它会完全删除pseuodelement，尽管看起来仍然很奇怪。可能是因为它的内容现在为空。根据，如果将“none”指定为内容属性，则不会生成伪元素。似乎设置一个无效值会自动计算为“无”。我的猜测是setProperty会删除引号本身——这很有意义；毕竟，如果它只是将所有内容都保留为字符串，那么您将无法设置px值，例如，因为它最终会显示类似于min-width的内容：“100px”而不是min-width:100px。也许是这样，为什么它会完全删除pseuodelement，尽管看起来仍然很奇怪。可能是因为它的内容现在为空。根据，如果将“none”指定为内容属性，则不会生成伪元素。似乎设置无效值会自动计算为“无”。