使用 javascript 更改内联 css 变量不会反映在伪选择器内容属性上

Question

使用

::after

伪选择器使用

content

属性编写文本，其值来自内联 css 变量。现在，单击文本我可以更改 css 变量值（可以在控制台中看到），但它没有反映在页面上，即没有应用于伪选择器中。

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

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

label {
  cursor: pointer;
}

.toggle {
  margin-inline: 1rem;
}

input[type="checkbox"] {
  display: none;
}
.text::after {
  content: var(--content);
  height: 4px;
  width: 4px;
  color: rgb(35, 174, 27);
  position: relative;
}

<label for="toggle" class="toggle">
    <input type="checkbox" name="change_case" id="toggle">
    <span class="text" style="--content: 'A'"></span>
    click to toggle
</label>

这里可能出现什么问题？

Answer 1

这是因为您为变量设置了错误的值 -

A

!=

'A'

您分配的值需要是 CSS 中的字符串值 - 因此它需要引号引起来，与您最初在 HTML 中设置的值相同。

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

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

label {
  cursor: pointer;
}

.toggle {
  margin-inline: 1rem;
}

input[type="checkbox"] {
  display: none;
}
.text::after {
  content: var(--content);
  height: 4px;
  width: 4px;
  color: rgb(35, 174, 27);
  position: relative;
}

<label for="toggle" class="toggle">
    <input type="checkbox" name="change_case" id="toggle">
    <span class="text" style="--content: 'A'"></span>
    click to toggle
</label>

Answer 2

点击之前：

<span class="text" style="--content: 'A'"></span> 点击后：

<span class="text" style="--content: a;"></span> 点击后应该是

<span class="text" style="--content: 'a';"></span> 您缺少“”（点击后单引号）