从 JS 更改 css 变量的值会导致奇怪的行为

Question

:root{
    --name: "＊";
}

.test::before{
    font-size: 13px;
    Content: var(--name);
}

document.documentElement.style.setProperty("--name", "test");

我想像在这个JS中一样操作上面的css变量，但是当我运行这个JS时，“*”就消失了，“test”没有反映出来。你知道原因吗？

（由 DeepL 翻译）

Answer 1

您需要按照以下步骤操作。请注意我添加的额外引用：

document.documentElement.style.setProperty("--name", "'test'");

:root{
    --name: "＊";
}

.test::before{
    font-size: 13px;
    Content: var(--name);
}

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

Changing the value of a css variable from JS causes strange behavior