CSS如何通过伪元素替代原有的下划线产生动态交互

用::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小时全天候智能回复用户消息，自动维护媒体主页，全平台渠道集成管理，电商物流平台一键绑定，让您出海轻松无忧！