用::after伪元素自定义下划线：先禁用原生text-decoration，再通过absolute定位+transform:scaleX实现平滑悬停动画，需设content、relative父容器、相对单位高度及overflow:hidden；多行需inline-block布局；IE需降级为background-size动画。
用 ::after 覆盖原生 text-decoration: underline
浏览器默认下划线位置固定、粗细不可控、无法动画，直接改 text-decoration 几乎没得调。真要动态交互，就得绕开它，用伪元素自己画一条线。
关键点是：先关掉原生下划线（text-decoration: none），再用 ::after 绝对定位在文字下方画矩形或渐变背景。
-
::after必须设content: ""，否则不渲染 - 父元素得是
position: relative，否则absolute会相对于 body 定位 - 高度别写死成
1px，用0.0625em这类相对单位更适配不同字号 - 避免用
border-bottom——它会撑开行高，且无法做平滑缩放
transform: scaleX(0) + transition 实现悬停伸展
纯靠 width 动画会有重排，性能差；用 scaleX 只触发合成，顺滑得多。但要注意起始态必须是 scaleX(0) 且 transform-origin: left center，否则会从中间或右边拉出。
- 触发元素需加
overflow: hidden，防止缩放时线条溢出 -
transition推荐写全：transform 0.3s ease-in-out，只写all容易误触其他属性 - 移动端 hover 不可靠，得额外加
:focus或用 JS 补.is-active
多行文本下划线怎么对齐？display: inline-block 是关键
纯 inline 元素的 ::after 无法跨行；一旦文字换行，伪元素只会出现在第一行末尾。解法是把文字容器设为 inline-block，再让伪元素宽度 100%、左对齐。
立即学习“前端免费学习笔记（深入）”；
- 别用
display: block——它会独占一行，破坏内联流式布局 -
white-space: nowrap能强制单行，但牺牲可读性，慎用 - 若内容动态加载，记得监听
resize或用ResizeObserver重算伪元素宽度
兼容性陷阱：IE 不支持 transform 在伪元素上生效
IE11 及以下，::after 上的 transform 直接被忽略，线条不会动。不是加前缀能解决的，是引擎级限制。
- 降级方案只能是 JS 控制
width+opacity，放弃缩放动画 - 如果项目还要求支持 IE，建议直接用
background-image: linear-gradient()模拟下划线，hover 时改background-size -
will-change: transform在 Chrome 里有时反而引发闪烁，测试后再加
letter-spacing 或 font-variant 时，伪元素的 baseline 对不准——这得靠 bottom 微调，而且每个字体都得单独测。 
