必须给父元素设position: relative，因为::after默认相对于最近定位上下文定位，不设则可能错位到body底部；设后才能以当前容器为基准精准控制bottom: 0等定位，且relative不引发布局偏移。
直接用 position: relative 配合 ::after 是目前最可控、最易动画的下划线方案，比改 text-decoration 或加 border-bottom 强得多。
为什么必须给父元素设 position: relative
伪元素 ::after 默认相对于最近的「定位上下文」定位。没设定位的父元素，它就一路往上找，最后可能贴到 底部；设了 position: relative，它才乖乖以当前文字容器为基准——这是所有精准对齐的前提。
- 不设的话，
bottom: 0会失效或错位，尤其在 flex / grid 容器里更明显 -
relative本身不改变文档流，不会引发布局偏移，纯属“占个锚点” - 如果父元素已是
absolute或fixed，那它自动成为定位上下文，可跳过这步
::after 必须写的最小配置项
漏掉任意一项，伪元素要么不显示，要么动不了。实测高频遗漏点：
-
content: ""—— 没这行，::after根本不渲染（不是隐藏，是压根不存在） -
position: absolute—— 否则无法脱离文本流、无法用bottom/left精确定位 -
width和height要设，且height推荐用0.0625em这类相对单位，避免字号缩放后线太粗或太细 -
transform: scaleX(0)+transition: transform 0.3s ease—— 这是悬停展开动画的核心组合
悬停动画常见错位与修复
下划线伸展时偏左、抖动、或没居中生长？大概率是 transform-origin 没配对：
立即学习“前端免费学习笔记（深入）”；
- 要从左往右伸展：
transform-origin: left bottom - 要从中间向两边展开：
transform-origin: center bottom（需配合left: 50%和transform: translateX(-50%) scaleX(0)） - 多行文本下划线断裂？把父元素设成
display: inline-block，否则::after只能覆盖第一行 - 动画卡顿？避免同时 animating
width和transform，只用transform: scaleX()，GPU 加速更稳
真正麻烦的是多行 + 渐变 + 响应式字号混合场景：这时 scaleX 会失准，得切到 background-size + background-position 方案，但那就不是纯伪元素一条路能扛住的了。
