使用JavaScript修改内联CSS变量，伪元素content属性未更新问题排查

核心原因 #

CSS的content属性要求字符串类型的值必须用引号包裹。你初始内联样式里的--content: 'A'是带单引号的，而JS通过setProperty设置变量时，直接传入了不带引号的a或A——此时CSS解析content: var(--content)会把这些值当作CSS标识符而非字符串，所以伪元素不会显示预期内容。

修复代码 #

修改JS部分，给变量值加上单引号，匹配初始内联样式的格式：

const toggleButton = document.getElementById("toggle");
const textSpan = document.querySelector(".text");

toggleButton.addEventListener("change", (e) => {
  textSpan.style.setProperty("--content", e.target.checked ? "'a'" : "'A'");
});

验证逻辑 #

• 初始状态：--content: 'A'，content: var(--content)等价于content: 'A'，正常显示A
• 切换后：--content: 'a'，content: var(--content)等价于content: 'a'，正常显示a

修改后点击切换，伪元素的内容就会同步更新了。

内容的提问来源于stack exchange，提问作者xkeshav