为什么CSS伪元素内容会被overflow:hidden裁剪？

伪元素内容受父容器overflow控制，因其属于父元素的匿名子级渲染盒；若父元素设overflow:hidden则被裁剪，解决需用absolute定位脱离常规流或改用clip-path等精确裁剪方案。

伪元素生成的内容受父容器overflow控制

因为 ::before 和 ::after 生成的框是父元素的子级渲染盒（anonymous box），不是独立层叠上下文或脱离文档流的元素。只要父元素设置了 overflow: hidden，这些伪元素内容就和普通子内容一样，被当作“溢出内容”裁剪。

常见问题表现：

1. 用 ::after 做三角形箭头，却在父 div 上加了 overflow: hidden，结果箭头消失
2. 用 ::before 实现文字左侧装饰线，但线段向左延伸时被截断

解决思路：要么让伪元素脱离裁剪范围，要么换生成方式：

1. 给父元素加 position: relative，再给伪元素设 position: absolute + 合理 top/left 偏移，使其脱离常规流（此时不再受父 overflow 影响，但受最近的 position: relative/absolute/fixed 祖先约束）
2. 避免在需要外伸内容的容器上直接设 overflow: hidden；改用 clip-path 或 mask 精确控制裁剪区域（兼容性需查 caniuse clip-path）
3. 若只是圆角+隐藏溢出，可用 border-radius 配合 overflow: hidden，但要确认伪元素未超出圆角边界

absolute定位的伪元素为什么有时仍被裁剪？

即使加了 position: absolute，如果其包含块（containing block） 本身有 overflow: hidden，且该块不是根元素或 position: static 元素，则裁剪依然生效。

典型场景：

1. 伪元素的父元素设了 position: relative; overflow: hidden → 伪元素的包含块就是它，会被裁剪
2. 伪元素的祖父元素设了 position: relative; overflow: hidden，而父元素是 position: static → 包含块向上回溯到祖父，仍被裁剪

验证方法：在开发者工具中选中伪元素，看 “Computed” 面板里 Containing Block 是谁；再检查那个块是否带 overflow: hidden。

实操建议：

1. 把 position: relative 和 overflow: hidden 拆开：只在真正需要裁剪的容器上设 overflow，另起一层做定位上下文
2. 用 transform: translateZ(0) 或 will-change: transform 强制创建新层叠上下文，有时可绕过某些浏览器的裁剪逻辑（不推荐作为主方案，属 hack）

flex/grid容器里的伪元素裁剪行为更隐蔽

Flex 容器默认有 overflow: auto 的隐式行为（尤其在设了 flex-wrap: nowrap 且内容超宽时），Grid 容器同理。此时即使没显式写 overflow: hidden，也可能发生裁剪。

容易忽略的点：

1. display: flex 的父元素若宽度固定，::after 生成的长横线可能被截断，但控制台看不出 overflow 声明
2. grid-template-columns: 1fr + 内容撑宽时，整个 grid 容器可能悄悄触发溢出裁剪

排查步骤：

1. 在 Elements 面板中右键父容器 → “Break on attribute modifications”，然后手动 toggle overflow，观察变化
2. 临时加 outline: 1px solid red 到伪元素，确认它是否真的渲染出来了，还是被裁剪了
3. 在 computed 样式里搜索 overflow，看是否有 inherited 或 initial 值被覆盖

伪元素的渲染位置、层级、包含块归属，比看起来更依赖上下文。别假设“absolute 就万事大吉”，得逐层确认它的定位依据和祖先的溢出策略。