::before 和 ::after 伪元素设 height: 100% 无效的根本原因是其不继承父元素高度，而是依赖父元素的 computed height；若父元素为 height: auto，则 100% 计算结果为 0px。
::before 和 ::after 伪元素设 height: 100% 大概率无效，根本原因不是伪元素特殊，而是它**没有继承父元素的 computed height**——父元素若为 height: auto，伪元素的 100% 就算出 0px。
伪元素的 height: 100% 为什么没效果
伪元素本身不参与文档流高度计算，它的 height: 100% 是相对于**生成它的宿主元素（即父元素）的 computed height**。但绝大多数情况下，宿主元素是块级默认 height: auto，导致 100% × 0px = 0px，视觉上“消失”或只显示内容高度（比如一个空格或换行符）。
常见错误现象：
- 给
.box::before { height: 100%; background: red; }加了背景，却只看到一条细线甚至看不到 - 父元素明明有 padding 或 border，伪元素仍不撑高
- 用开发者工具检查伪元素的
Computed → height，显示0px或auto
想让伪元素填满父容器，必须先让父元素有明确高度
不能只靠内容撑开父元素，得切断 auto 链：
-
html, body { height: 100%; margin: 0; padding: 0; }—— 这是起点，缺一不可 - 所有中间父级（比如
.wrapper、.card）也必须显式设height: 100%或具体值 - 用开发者工具逐层点开：选中伪元素 → 切到「Computed」→ 看
height是否为像素值；任一层是auto，伪元素就废 - 注意：伪元素的包含块就是其宿主元素，
position: absolute不会改变这点，但若宿主本身脱离文档流（如position: absolute且无top/bottom），它的height很可能仍是auto
比 height: 100% 更靠谱的伪元素填高方案
直接操作伪元素本身，绕过百分比继承链：
- 用
top: 0; bottom: 0;配合position: absolute;：.box { position: relative; } .box::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: red; } - 若需响应式或嵌套在 Flex/Grid 中，优先让宿主元素用
display: flex或display: grid，再对伪元素用align-self: stretch（需确保宿主有明确高度上下文） - 避免同时写
height: 100%和top/bottom—— 冲突时浏览器以定位为准，height被忽略 -
min-height: 100%对伪元素无效，它不接受min-height，只认height、top/bottom或flex相关属性
容易被忽略的 box-sizing 和 content 干扰
即使高度链通了，伪元素也可能“看起来没填满”：
- 默认
box-sizing: content-box，height: 100%只管内容区，padding/border 会额外加高 → 加box-sizing: border-box统一基准 - 伪元素默认是 inline-level，若内容为空，
line-height会影响实际渲染高度 → 显式设display: block或display: flex - 某些字体下，空伪元素会因
font-size和line-height产生微小高度，掩盖真实问题 → 临时加font-size: 0排查
真正卡住的人，往往没打开开发者工具看伪元素自身的 Computed → height，而是反复改父元素样式。记住：伪元素不继承高度，只读取父元素当前计算出的 height 值——这个值必须是像素，不能是 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
