使用 JavaScript 更改伪元素 ::after 文本内容

Question

有没有办法使用JS动态改变::after伪元素的文本内容？我正在尝试创建一个表单作为练习（刚刚开始学习 Web 开发），但我无法使用 JS 更改密码字段下的文本。

我希望它告诉用户密码是否太短，或者确认密码字段具有不同的值。

以下是 GitHub 上的所有文件：

https://github.com/mihaib1/sign-up-form

尝试使用在根目录中声明的 CSS 变量，但无法使该变量的值出现在屏幕上，我不知道为什么。另外，当使用 CSS 变量时，只有当我只使用一个单词时它们才会改变。当尝试将变量设置为由多个单词组成的字符串时，使用 setProperty 不会改变它。

Answer 1

您可以通过使用attr()css 中的函数并使用setAttribute更改 dom 节点上的属性值来实现此目的：

document.onclick = function() {
  document.getElementById("test").setAttribute("data-after", "thank you!")
}

#test::after{
    content: attr(data-after);
    letter-spacing: 0;
    color:red;
}

<div id=test data-after="click me"></div>