::after被overflow:hidden裁剪的根源是某祖先元素同时满足overflow:hidden和position≠static，成为包含块并裁剪所有后代；加content仍不可见常因color/opacity/背景色一致、display:inline无尺寸、定位偏移越界或层叠上下文遮挡。
::after 被 overflow: hidden 裁剪，不是伪元素写错了，而是父级（或任意祖先）同时满足「overflow: hidden」+「position ≠ static」——它就成了包含块，会裁掉所有后代，包括 ::after。
为什么加了 content 仍看不见 ::after
常见误判是以为“写了 content 就一定显示”。实际中以下情况会让 ::after 视觉上消失：
-
content值为none或完全缺失 —— 浏览器根本不生成盒模型 -
color: transparent、opacity: 0、或背景色与父容器一致 - 父级因
transform、filter或will-change创建了新层叠上下文，把 ::after 压在底层 -
display: inline默认无宽高，没background/border就是“空的”——加border: 1px solid red立刻验证是否真渲染
定位偏移后被裁，怎么让 ::after “破框”显示
当 ::after 使用 position: absolute 并设置了 top: -10px 这类负偏移，而父级又带 overflow: hidden，大概率被切。有效解法是触发独立渲染层：
- 给 ::after 加
transform: translateZ(0)（最轻量，兼容性好） - 必须配合
position: absolute（或fixed）和显式z-index: 1，否则可能错位或被遮 - 避免用
translateX(0)或rotate(0)—— 现代浏览器已优化掉这类纯 2D 变换的图层提升效果 - 慎用
will-change: transform：Safari 对其层叠上下文处理更敏感，Firefox 表现也不稳定
加 padding 能不能救？怎么算才不白加
能，但它是“预留空间”，不是修复机制。关键看 ::after 最大外延距离：
- 若 ::after 设了
top: -8px; right: -12px; box-shadow: 0 4px 16px rgba(0,0,0,0.15)，则需至少padding-top: 8px、padding-right: 12px，阴影外延 ≈16px + 4px = 20px，取最大值再加 2–4px 余量 - 加了
padding后内容会被挤，务必同步设box-sizing: border-box - Grid 容器内加
padding可能拉高grid-auto-rows，此时优先改用align-items: start+min-height
老项目里最常漏查的一环
开发者工具里只关直接父级的 overflow 不够。DOM 链路上**任意一层祖先**只要同时满足 overflow: hidden 和 position: relative/absolute/fixed，就会成为裁剪源。逐层关闭 computed 样式里的 overflow，观察 ::after 是否恢复，比盲目调样式更快定位问题点。真正复杂的地方在于：升层（translateZ(0)）虽能逃裁剪，但可能让 ::after 不再参与父级的 filter 或 mix-blend-mode 计算——得实测，不能假设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
