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

user_16705737 0
Viewed 67
:root{
    --name: "＊";
}

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

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

I want to manipulate the above css variables as in this JS, but when I run this JS, the "*" just disappears and "test" is not reflected. Do you know the cause?

(Translated by DeepL)

electron css javascript
1 Answers

You need to do like below. Note the extra quote I added:

document.documentElement.style.setProperty("--name", "'test'");
:root{
    --name: "＊";
}

.test::before{
    font-size: 13px;
    Content: var(--name);
}
<div class="test"></div>

user_86203330
Related