伪元素无法清除inline-block间隙，因其不干预HTML空白符解析；真正有效的是font-size:0+显式重设字号，或现代用flex+gap。
不能用伪元素“优雅地清除 inline-block 多余间隙”——伪元素本身不解决间隙问题，反而可能让事情更糟。
为什么 pseudo-element（如 ::before/::after）不是解法
伪元素是插入到元素内部的抽象节点，它无法影响 HTML 解析器对标签间空白符（换行、空格）的处理。inline-block 间隙的本质是：浏览器把源码里的换行符当作一个 U+0020 空格字符渲染，而这个字符属于父容器的行内格式化上下文（IFC），和子元素是否带伪元素完全无关。
常见误解是想用 ::after { content: ""; display: table; clear: both; } 这类 clearfix 技巧来“清掉间隙”，但那套逻辑只对浮动（float）有效，对 inline-block 完全无效——clear 属性对非浮动元素无意义。
真正能起效的方案里，哪些和伪元素有关
唯一和伪元素沾边的合法用法，是配合 letter-spacing 或 word-spacing 做负值抵消，但这是副作用，且不推荐：
立即学习“前端免费学习笔记（深入）”；
-
letter-spacing: -0.31em设在父容器上，会让那个“空格字符”视觉收缩；再用::after { letter-spacing: normal; }恢复子内容，但子元素必须显式重置，否则文本也会被压缩 - 该方法在 Safari 和旧版 Chrome 中表现不稳定；Opera 曾有最小 1px 限制；屏幕阅读器仍按原始空格解析，影响可访问性
- 如果子元素用了
em单位（比如padding: 0.5em），计算基数变成 0，导致布局崩溃
别绕弯子：直接用 font-size: 0 + 显式重设字号
这是最可控、兼容 IE8+、且不依赖伪元素的正解：
-
font-size: 0必须写在**直接包裹 inline-block 子项的父容器**上，多套一层 div 却没设，就失效 - 所有含文本的子元素（包括
<button></button>、<input>、<span></span>）都得显式声明font-size，不能只写inherit -
<img alt="如何使用CSS伪元素优雅地清除inline-block多余间隙？" >虽无文字，但在旧版 Safari 中仍可能因继承font-size: 0出现垂直对齐异常，建议统一加font-size: 16px - 避免在
或全局容器设font-size: 0——整页文字会消失，且极易遗漏恢复
现代项目请直接放弃 inline-block
如果你的最低支持环境是 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex + gap 是唯一应选路径：
- flex 容器天然忽略 HTML 中的空白文本节点，间隙从根源消失
-
gap可精确控制间距（如gap: 8px），响应式下稳定，无需 hack - IE10–11 不支持
gap？用margin-right: 8px+:not(:last-child)回退即可，比维护伪元素补丁干净得多
真正容易被忽略的是：当 legacy 代码还没重构完，有人一边保留 inline-block，一边又叠加上 transform: scale(0.99) 或 letter-spacing: -0.31em ——这些操作不仅不会消除间隙，还会触发新的渲染异常，而且屏幕阅读器仍按原始 HTML 结构解析。
