: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)
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>