划线动效应使用::after伪元素配合width动画或transform:scalex()实现，避免text-decoration；需设position:absolute、display:block、overflow:hidden及transform-origin:left center以确保精准展开。
用 ::after 伪元素 + width 动画实现划线展开
直接上核心：划线动效本质是让一条横线从无到有地“长出来”，最稳妥的方式是用 ::after 生成一条绝对定位的下划线，再对它的 width 做 CSS 动画。别用 text-decoration，它不支持动画。
常见错误是给文字本身加 text-decoration: underline 然后试图动画 text-decoration-thickness 或 text-underline-offset —— 这些属性目前无法触发过渡或动画，浏览器会静默忽略。
-
必须用伪元素：
::after（或::before）创建独立可动画的块 -
必须设
display: block或inline-block：否则width在inline元素上无效 -
必须设
overflow: hidden在父容器上（可选但推荐）：防止线条初始宽度为 0 时因字体撑开导致轻微位移
transition 和 @keyframes 哪个更合适？
两种都能做，但适用场景不同：transition 适合鼠标悬停触发、一次展开/收起；@keyframes 更适合自动播放、循环或需要精确控制中间帧的场景。
容易踩的坑是混用：比如给 ::after 设了 transition: width 0.3s，又在 hover 里写 width: 100%，但没提前设好初始 width: 0 和 overflow: hidden，结果动画不生效或跳变。
立即学习“前端免费学习笔记（深入）”；
- 用
transition：确保父元素有position: relative，伪元素有position: absolute; left: 0; bottom: -2px; width: 0;，hover 时改width: 100% - 用
@keyframes：更适合配合animation属性做一次性入场动效，比如页面加载后自动划线，此时不需要 hover 触发 - 性能注意：
width动画会触发重排（reflow），若元素频繁变动建议用transform: scaleX()替代（见下一条）
为什么推荐用 transform: scaleX(0) 而不是 width: 0？
因为 transform 只影响绘制层，不触发重排，动画更顺滑，尤其在低端设备或复杂布局中差异明显。而且 scaleX 天然支持从中心或左端展开，控制更灵活。
典型写法是：伪元素设 transform-origin: left center，初始 transform: scaleX(0)，hover 时 transform: scaleX(1)。注意别漏掉 transform-origin，否则默认从中心缩放，线条会向两边同时展开。
-
scaleX不依赖父容器宽度计算，避免因 font-size、letter-spacing 变化导致的错位 - 必须显式设
transform-origin: left center，否则默认是center center，划线会“炸开”而不是从左往右伸展 - 如果父元素用了
text-align: right或justify，scaleX仍能保持左对齐展开，width则可能因文本盒宽度变化而抖动
兼容性与移动端要注意什么？
所有现代浏览器都支持 ::after + transform 动画，包括 iOS Safari 13+ 和 Android Chrome 70+。真正要小心的是移动端 touch 事件没有 hover，所以纯 hover 触发的划线在手机上根本不会出现。
解决办法不是加 JS 监听 click，而是用 :active 或 :focus-within 补充交互反馈；或者直接放弃交互触发，改用页面加载后自动播放的 animation。
- iOS Safari 对
transform动画有渲染延迟，加will-change: transform可缓解（但别滥用，只加在真正动画的伪元素上） - 不要用
pointer-events: none在伪元素上——它会让整个下划线区域不可点击，影响可访问性 - 如果文字是响应式字号（如
rem或vw），伪元素的bottom偏移量也要用相对单位（如em），否则小屏下划线位置会漂移
