::after清除浮动失效主因是未触发bfc，需设overflow或zoom:1；必写content:""并设display:block/table；清除对绝对定位无效；图标错位需调vertical-align和font-size；css变量不能直用于content，须用attr()；移动端需增大点击区并设pointer-events:auto。
为什么::after清除浮动总失效？
不是伪元素没生效，是触发条件没满足。最常见的是父容器没设zoom: 1（IE）或没设overflow类属性（现代浏览器），导致BFC未建立，::after生成的内容根本进不了文档流参与清除。
-
::after必须配合content: ""，缺了这句等于没写 - 必须设
display: table或display: block，inline无法撑开高度 - 若父元素有
height固定值，浮动清除会“被截断”，视觉上还是塌陷 - 用
clear: both时，只对兄弟级浮动元素有效；如果子元素是position: absolute，它不参与文档流，::after清不了
::after加图标/装饰时样式错位怎么办？
伪元素默认继承父元素的font-size、line-height和vertical-align，但没内容时这些值常让定位飘忽。尤其用content: "→"这类符号，容易和文字基线不对齐。
- 显式设
font-size: inherit或具体值，避免从祖先意外继承缩放 - 加
vertical-align: middle或top，比默认baseline更可控 - 若用
background-image替代字符图标，记得配width/height和display: inline-block - 不要依赖
margin-left微调位置——换字体或字号就偏，改用transform: translateX(4px)更稳定
CSS变量在::after里能用吗？
能，但仅限content属性中通过attr()间接读取，不能直接content: var(--icon)。这是CSS规范限制，不是浏览器bug。
- 正确姿势：
data-icon属性 +content: attr(data-icon)，再用JS或HTML动态写入值 -
var()可作用于color、background-color、transform等其他::after样式，唯独content不行 - 想实现主题化图标？得搭配
@supports (content: normal)做降级，老浏览器会忽略整个伪元素
移动端::after点击区域小，点不中怎么办？
伪元素本身不响应点击事件，所谓“点中”其实是点了它所在的父元素。但::after若设了position: absolute又没留足够触发区，手指一划就滑过去。
立即学习“前端免费学习笔记（深入）”；
- 给父元素加
padding-right预留空间，别指望靠::after自己撑出可点范围 - 需要独立响应？用真实
<span class="icon"></span>代替，伪元素只负责样式 - 若坚持用伪元素模拟按钮，必须加
pointer-events: auto（默认是none），且确保父元素没设pointer-events: none - iOS Safari对小尺寸
::after有300ms延迟+点击穿透风险，最小建议尺寸≥44×44px
伪元素看着轻量，但一旦涉及布局干预或交互延伸，每个细节都卡在渲染层和事件层的夹缝里。别把它当“语法糖”，得按真实DOM节点的逻辑去推演它的存在感。
