从 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>