伪元素在flex布局中偏移不准，因默认行内级且不继承flex对齐属性，需显式设display并用margin/transform微调；nth-child应写为.item:nth-child(n)::after；响应式推荐em单位；ie11需加flex-shrink: 0或改用真实标签；box-sizing默认content-box易撑出容器。
flex布局里用::before或::after做指示器，为什么总偏移不对？
因为伪元素默认是行内级，不自动继承display: flex容器的对齐逻辑，且align-items/justify-content对伪元素无效。必须显式设置display并配合position或transform微调。
- 给伪元素加
display: block或display: inline-block，否则width/height可能不生效 - 如果父容器是
flex-direction: row，想让指示器垂直居中，别只靠align-items: center——得在伪元素上补margin-top: 50%再transform: translateY(-50%) - 避免用
top/left硬定位，flex容器尺寸变化时容易错位；优先用margin或transform相对移动
指示器要随内容项动态生成，nth-child配合伪元素怎么写才稳？
直接在每个子项上挂::after最可靠，比在容器上用nth-child选中伪元素更可控。浏览器对container::after:nth-child(2)这类写法支持不一致，尤其旧版Safari。
- 正确姿势：
.item:nth-child(2)::after—— 先选中元素，再加伪元素 - 错误姿势：
.container::after:nth-child(2)—— 伪元素不是DOM节点，不能被:nth-child索引 - 如果要用统一控制（比如只让第3个有指示器），在CSS里写
.item:nth-child(3)::after { content: "→"; }，别试图用JS动态加class
指示器需要响应式缩放，em和rem哪个更适合？
em更合适。因为指示器通常紧贴文字或图标，它的大小应随宿主元素字体缩放，而rem会脱离局部上下文，导致在嵌套flex项中比例失真。
- 用
font-size: 0.6em定义指示器字号，它会按父项font-size等比缩放 - 避免用
px写死尺寸，否则媒体查询里要重复覆盖 - 如果指示器含
border或padding，也统一用em单位，保持缩放一致性
IE11下伪元素在flex容器中消失或错位怎么办？
IE11对::before/::after在display: flex子元素上的渲染有bug，特别是当父容器设了flex-wrap: wrap或子项用了flex: 1时。
- 临时解法：给伪元素加
flex-shrink: 0，防止被IE错误压缩 - 兼容底线：改用真实
<span class="indicator"></span>标签替代伪元素，CSS里只控制显示/隐藏 - 别依赖
order属性调整伪元素顺序——IE11根本不认伪元素的order
box-sizing默认值。它默认是content-box，但如果你用width: 100%又加了padding，就会撑出容器。真要填满，得提前写box-sizing: border-box——这点连很多CSS预处理器生成的重置都没覆盖到。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
