用::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%、左对齐。 JoinMC智能客服 JoinMC智能客服帮您熬夜加班7X24小时全天候智能回复用户消息自动维护媒体主页全平台渠道集成管理电商物流平台一键绑定让您出海轻松无忧