伪元素不是DOM节点，JS无法直接操作：document.querySelector('.icon::after')返回null；可行方案是间接控制，首选CSS变量桥接，其次class切换，慎用动态插入style规则。
伪元素不是DOM节点，JS拿不到引用
这是所有问题的根源：你写 document.querySelector('.icon::after') 一定返回 null，因为 ::before 和 ::after 根本不在 DOM 树里。浏览器渲染时才生成它们，JS 层面无法直接 select、style 赋值或监听事件。
常见错误现象包括：Cannot read property 'style' of null、getComputedStyle(el, '::before') 能读但没法写、el.style.setProperty('content', '...') 完全没效果。
别试图绕过这个限制——它不是 bug，是规范设计。所有可行方案都是“间接控制”，核心思路是：让 JS 改变某个能被 CSS 捕获的信号，再由 CSS 把这个信号映射到伪元素上。
用 CSS 变量（--var）桥接 JS 和伪元素
这是现代项目的首选方案，干净、可动画、易维护。关键点在于：变量必须定义在伪元素的宿主元素上，且伪元素内用 var(--var-name) 引用。
立即学习“Java免费学习笔记（深入）”；
-
btn.style.setProperty('--icon-color', '#ff6b6b')—— 必须作用在写::after的那个真实元素（比如<button>）上 - 漏掉双短横线前缀（写成
'icon-color'）会导致静默失败 - CSS 中要显式声明默认值，例如
button { --icon-color: #007bff; }，否则未设变量时伪元素可能不显示 - IE 不支持 CSS 变量，若需兼容，得 fallback 到 class 切换
示例：
button::after {
content: '';
width: 100%;
height: 2px;
background-color: var(--underline-color, #007bff);
}
JS 执行 btn.style.setProperty('--underline-color', '#dc3545') 即可生效。
用 classList 切换预设样式类
当需要改 content 字符串、切换整套布局或兼容老浏览器时，这个方案最稳妥。本质是把不同状态的伪元素样式提前写死在 CSS 里，JS 只负责开关类名。
- 不要用
element.className = 'xxx'全量覆盖，会清掉其他框架或 JS 加的类 - 优先用
element.classList.add('state-error')/.remove('state-success') - 多个状态共存时，避免类名冲突，比如
.icon--warning::before和.icon--success::before应互斥或设计为叠加逻辑 - 滚动条隐藏这类 Webkit-only 伪元素，也适用此法：
.hide-scrollbar::-webkit-scrollbar { visibility: hidden; }+el.classList.add('hide-scrollbar')
动态插入 <style> 规则（慎用）
仅在极少数场景下需要：比如运行时生成大量主题色规则、或用户自定义样式。它绕过了类名和变量的抽象层，直接操作样式表。
- 不要用
document.styleSheets[0].insertRule()，跨域<link>样式表会触发SecurityError - 推荐创建新
<style>标签并追加到<head>，后续可用style.remove()清理 - 频繁增删规则会触发重排，性能不如预设类名 +
classList.toggle() - 注意
insertRule第二个参数是插入位置索引，不是“追加”；用sheet.cssRules.length才等效于 append
容易被忽略的是：伪元素选择器必须完整匹配（如 .btn::before），且不能带空格或错误语法，否则整条规则静默失效。
