内联css不支持伪元素，因其语法非法——style属性只接受“属性: 值”声明，而::before/::after必须配合选择器在、外部css或shadow dom中使用。
内联CSS根本不支持伪元素，不是“不生效”，而是语法非法——浏览器解析时直接跳过整条声明。
为什么 style 属性里写 ::before 或 ::after 完全无效
HTML 的 style 属性只接受「属性: 值;」形式的声明列表，比如 color: red; margin: 0;。伪元素 ::before 和 ::after 是 CSS 规则的一部分，必须配合选择器使用，例如 p::before { content: "•"; }。这种结构在 style 属性中没有语法位置：
- 写成
<div style="::before { content: 'x'; }"> —— 浏览器当作无效声明丢弃，控制台无报错但也不计算 <li>试图用 JS 设置 <code>el.style.before = "content: 'x'"——el.style对象根本没有before这个可写属性 - 哪怕把伪元素名“伪装”成普通属性（如
style="--before: x"）—— 仍是自定义属性，和伪元素渲染机制无关 -
<style></style>标签内：写button::after { content: "→"; }是合法且生效的 - 外部
.css文件：通过<link rel="stylesheet" href="main.css">引入，规则可复用、可缓存 - Shadow DOM 中的
<style></style>：若伪元素目标元素也在同一 Shadow Root 内，作用域匹配即可生效 - 注意：
@import在<style></style>块里虽能用，但会阻塞渲染，且不能嵌套伪元素规则到被导入文件中 - 从 DevTools 的 Styles 面板复制带
::before的整行规则，粘贴进style属性 —— 直接失效 - 用构建工具（如 Tailwind）时，在 HTML 中写
before:content-['x']却未启用content插件或未配置content路径 —— 工具根本没生成对应 CSS 规则 -
::before必须配content属性才有渲染节点，漏写content（哪怕值为空字符串""）会导致伪元素不创建 - 某些旧版 Safari 对
content中的 Unicode 字符或 URL 引用支持不稳定，建议优先用纯文本或 base64 图片 - 预设多个类名，用 JS 切换：
<div class="status--pending"> + <code>.status--pending::before { content: "⏳"; } - 用 CSS 自定义属性传参：
<div style="--icon: '✓'"></div>+div::before { content: var(--icon); }（注意 IE 不支持） - 动态注入
<style></style>标签（慎用）：JS 拼接规则字符串后插入document.head，适合极少数临时覆盖场景
哪些方式真正支持伪元素
只有能承载完整 CSS 规则块的上下文才支持伪元素：
常见误操作与静默失败场景
开发者常以为“写了就该出效果”，结果发现伪元素没渲染，其实问题不在代码逻辑，而在引入位置本身不合法：
动态插入伪元素内容的替代方案
如果必须响应 JS 状态变化来控制伪元素内容，不能靠改 style 属性，得走 CSS 规则路径：
伪元素的渲染依赖于完整的 CSS 解析流程，而 style 属性只是样式快照，连选择器都不存在。别在它身上试 ::before，就像别指望 console.log 能执行 DOM 插入一样——边界很清晰，越界就静默失败。
