根本原因是::after伪元素默认display: inline，不支持height等块级属性；必须设置content: ""和display: block/inline-block等才生效，且需排除overflow隐藏、visibility隐藏或样式覆盖等问题。
为什么 ::after 伪元素设了高度却看不见
根本原因通常是：伪元素默认是 display: inline，而 inline 元素不支持 height、width、margin-top/bottom 等块级属性。即使写了 height: 20px，也完全无效。
::after 必须显式设置 display 才能生效高度
要让高度起作用，至少得把显示模式改成支持尺寸的类型：
-
display: block—— 最常用，适合单行或需要独占一行的装饰 -
display: inline-block—— 适合和文字同行、又需要控制宽高的场景（比如下划线、小图标） -
display: flex或display: grid—— 需要内部布局时用，但注意兼容性（IE 不支持flex在伪元素上）
别漏掉 content：没有 content 声明（哪怕只是 content: ""），::after 根本不会渲染，更别说高度了。
常见错误写法与修正对比
❌ 错误（高度无效）：
立即学习“前端免费学习笔记（深入）”；
.box::after {
height: 10px;
background: red;
}
✅ 正确（补全必要项）：
.box::after {
content: "";
display: block;
height: 10px;
background: red;
}
⚠️ 注意：content: " "（空格）和 content: "" 效果不同——前者会触发空白字符渲染，可能带来意外行高或间距；推荐用 content: "" + display: block 组合。
其他影响高度显示的隐藏因素
即使 display 和 content 都对了，还可能被这些干扰：
- 父元素有
overflow: hidden，且伪元素超出范围（比如负 margin 拉出、transform 位移后又被裁剪） - 伪元素设置了
visibility: hidden或opacity: 0（看起来“没高度”，其实是透明/不可见） - CSS 优先级问题：被其他规则覆盖了
display或height，用浏览器开发者工具检查计算样式 - 某些旧版 Safari 对
::after的height+display: inline-block支持不稳定，建议统一用block
真正卡住的时候，先打开 DevTools，确认 ::after 节点是否出现在 Elements 面板里，再看 Styles 面板中 content 和 display 是否被正确应用——很多“不显示”其实连节点都没生成出来。
