::before 在 Flex 容器中默认不占剩余空间，因其 display 默认为 inline，不参与 Flex 布局；需显式设 display: block 或 flex 并置于容器上，配合 flex: 1 才能成为有效 flex item。
直接用 ::before 在 Flex 容器里占剩余空间，不加定位或 flex 设置，基本无效——它默认是行内元素，不参与 Flex 布局计算。
为什么 ::before 默认不占剩余空间
伪元素本身没有 display 属性的默认值（实际由 UA stylesheet 设为 display: inline），在 Flex 容器中，inline 元素不会自动成为 flex item；即使设了 content: ""，也得显式声明 display: block 或 display: flex 才能被容器识别为子项。
-
::before不是真实 DOM 节点，不继承父容器的display: flex，必须手动“激活” - 没设
display时，它会被忽略或退化为文本节点，宽度为 0 - 即使设了
width: 100%，在无定位上下文时，这个百分比参考的是最近已定位祖先，不是宿主元素
让 ::before 成为真正的 Flex 子项
关键：把它变成一个可参与 flex 分配的 item，而不是装饰性覆盖层。
- 给伪元素设
display: block（或display: flex） - 在 Flex 容器上使用
::before，而非某个子项上——否则它属于那个子项的局部上下文，无法撑开整个容器 - 配合
flex: 1或flex-grow: 1，让它响应剩余空间
示例（导航栏右侧对齐）：
立即学习“前端免费学习笔记（深入）”；
.nav {
display: flex;
}
.nav::before {
content: "";
flex: 1; /* ✅ 关键：占据所有剩余空间 */
}此时 ::before 是 .nav 的第一个 flex item，把后续真实子项全部推到右边。
常见错误：在子项上用 ::before 撑容器空间
比如想让某个按钮的 ::before 把其他按钮挤开——这行不通。它的 flex 属性只作用于自身所在的 formatting context（即那个按钮的盒模型），不影响父容器的布局分配。
- 错误写法：
.btn::before { content:""; flex: 1; }→ 无效，.btn不是 flex 容器 - 若
.btn自身是 flex item，它的伪元素仍不属于父 flex 容器的子项列表 - 真正要撑空间，必须把伪元素放在容器级，且确保它被当作 flex item 渲染
兼容性与性能注意点
老版本 Safari（iOS ::before/::after 的处理不一致，有时会忽略 flex 属性或渲染错位。
- 稳妥做法：用真实空
<div>替代，尤其当需要精确控制或支持 iOS 13 及以下 - 如果坚持用伪元素，建议加
flex-shrink: 0防止在窄屏下被压缩变形 - 避免在大量列表项中每个都用
::before占空间——伪元素虽不增加 DOM 节点，但每个都会触发样式计算和布局，可能影响滚动性能
真正起作用的从来不是“伪元素”本身，而是你有没有把它放进正确的 layout context 里——它只是个钩子，Flex 规则才是执行者。
