如何用JavaScript动态修改::after伪元素的文本内容？

问题1：CSS变量无法在伪元素content中显示 #

伪元素的content属性使用CSS变量时，要确保变量值为字符串类型，且CSS引用格式正确。示例代码：

:root {
  --password-error: ""; /* 初始设为空字符串 */
}

.password-field::after {
  content: var(--password-error);
  color: #dc3545;
  margin-left: 0.5rem;
  /* 按需设置display，确保伪元素可见 */
  display: inline-block;
}

若变量仍不生效，检查父元素是否为伪元素提供了可渲染的上下文，比如父元素不要设为overflow: hidden遮挡伪元素。

问题2：setProperty设置多单词字符串无效 #

用JavaScript的setProperty修改变量时，多单词字符串需要嵌套引号包裹——外层用JS的字符串引号，内层加CSS识别的引号，否则浏览器会把空格后的内容当成无效值。示例代码：

// 提示密码过短
document.documentElement.style.setProperty('--password-error', '"密码长度不能少于8位"');

// 提示确认密码不一致
document.documentElement.style.setProperty('--password-error', '"两次输入的密码不匹配"');

当密码验证通过时，只需把变量设为空字符串即可清空提示：

document.documentElement.style.setProperty('--password-error', '""');

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