下划线宽度需与标题文字长度一致，应将标题设为 display: inline-flex 并加 white-space: nowrap，伪元素用 width: 100% 和 transform: scaleX() 动画实现精准对齐与流畅效果。
下划线宽度怎么跟标题文字长度一致
直接用 width: fit-content 不行——伪元素默认不继承父级 inline 尺寸，得靠 flex 把标题“撑开”再让伪元素跟着它。核心是让标题变成 display: inline-flex 或包裹一层 display: flex 的容器，再用 ::after 绝对定位或 flex 自适应。
- 别给标题本身设
display: block，否则宽度 100%，下划线就拉满 - 如果标题是
<h2></h2>这类块级元素，必须包一层<span></span>并设display: inline-flex - 伪元素用
width: 100%才能填满父容器（即那个 inline-flex 容器），不是填满整行
动画怎么只动下划线不带偏移文字
文字不能参与 transform 动画，否则会触发重排、模糊或抖动。正确做法是把动画全交给伪元素，且必须用 transform: scaleX() + transform-origin 控制起点，而不是改 width。
-
width动画会触发 layout，慢且卡；scaleX()是合成层动画，60fps 稳 - 起始状态设
transform: scaleX(0)，结束状态transform: scaleX(1) - 加
transform-origin: left确保从左往右展开；若要从中间，用center - 记得加
will-change: transform（可选，对长列表有帮助）
flex 容器里文字换行了怎么办
flex 默认不换行，但标题内容过长又没设 white-space: nowrap，文字可能折行，导致伪元素宽度只取第一行——这是最常被忽略的断裂点。
- 在 inline-flex 容器上加
white-space: nowrap强制单行 - 如果真需要响应式换行，就得放弃
width: 100%，改用 JS 测量offsetWidth动态设伪元素宽度（不推荐，破坏 CSS 驱动逻辑） - 移动端慎用：小屏下
nowrap可能溢出，建议配合overflow: hidden和text-overflow: ellipsis
不同浏览器下划线位置飘移
伪元素的 bottom 值依赖基线对齐，而不同字体、line-height、font-size 下基线位置不一致，导致下划线离文字距离忽高忽低。
立即学习“前端免费学习笔记（深入）”；
- 统一用
bottom: 0.1em而非固定像素（如2px），更适配缩放和字体变化 - 给标题加
vertical-align: bottom或baseline，减少行内对齐干扰 - Chrome 和 Safari 对
inline-flex中align-items解析略有差异，显式写align-items: flex-end更稳
