SCSS嵌套中::before/::after不渲染，主因是content缺失或非法：浏览器不生成无合法content的伪元素；需检查content值、定位上下文及display适配。
SCSS嵌套中::before/::after不渲染，大概率是content缺失
伪元素在 SCSS 嵌套里“消失”，90% 的情况不是嵌套语法的问题，而是 content 没写或写错了。浏览器规范强制要求：没有合法 content 值，伪元素盒模型根本不会生成——不是“看不见”，是压根没进渲染树。
常见错误包括：
-
content完全没声明（SCSS 编译后仍是空规则） - 写了
content: none或content: normal（等同于未设置） - 用
content: ""但后续没配display和尺寸，导致视觉上为空白 - 用
content: attr(data-tip)，但对应元素没这个属性，或值为空字符串
嵌套层级过深触发 Blink 解析中断，::after直接被跳过
Chrome / Edge（Blink 内核）对非法伪元素声明极其敏感，一旦在嵌套块内混入不支持的伪元素（比如 ::-moz-progress-bar），或注释包裹伪元素规则，整个 CSS 块可能被静默丢弃——连报错都不给。
排查要点：
立即学习“前端免费学习笔记（深入）”；
- 检查嵌套结构里是否意外出现了
::-webkit-、::-moz-等前缀伪元素（尤其从旧代码复制过来时） - 确认没有用注释把伪元素规则包起来，例如：
/* */ .btn::after { content: "→" }—— 注释不屏蔽解析上下文 - 用 W3C CSS Validator 或 PostCSS 插件提前校验输出的纯 CSS，看是否有语法级报错
父选择器带 display: flex / grid 时，伪元素需显式设 display
在 SCSS 嵌套中写 .card { display: flex; &::before { content: ""; } }，伪元素虽能生成，但默认 display: inline 会导致它在 Flex 容器中无法正确参与布局——既不占空间，flex-grow 也不生效，看起来就像“没显示”。
修复方式很直接：
- 加
display: block或display: inline-block（适合装饰性场景） - 若伪元素内部还要排布，改用
display: flex - 避免只靠
width/height而不改display，那两个属性对inline元素完全无效
定位失效：嵌套后父元素没 position，::after 跑到视口外
SCSS 嵌套容易让人忽略一个底层事实：position: absolute 的伪元素，永远相对于「最近的已定位祖先」，而不是它的直接父选择器。嵌套写法如 .menu { position: relative; &__item::after { position: absolute; top: 100%; left: 0; } } 是安全的；但若漏掉 position: relative，::after 就会按视口定位，常偏移到屏幕外。
调试建议：
- 在 DevTools 的 Elements 面板中右键目标元素 → “Force element state” →
:after，再看 computedtop/left值是否异常（比如left: -9999px） - 临时加
outline: 1px solid red和background: rgba(255,0,0,0.2)，确认盒子是否真生成且位置可预期 - 别在
display: inline元素（如<span></span>）上直接套position: relative+ 伪元素，老版 Safari 兼容性差
真正卡住人的地方，往往不是嵌套语法本身，而是 content 值是否被编译进最终 CSS、父容器有没有形成定位上下文、以及 display 是否适配了当前布局模式——三者缺一，伪元素就“活”不起来。
