纯css实现下划线从中点向两端展开：通过position: relative容器+::after伪元素（content/absolute/bottom:0/left:50%/translatex(-50%) scalex(0)/width:100%）配合transform过渡，结合cubic-bezier时间函数优化动效。
用 ::after 伪元素配合 transform: scaleX() 实现中间展开效果
纯 CSS 实现“下划线从文字中间向两端展开”，核心是避开 text-decoration: underline 的不可控性，改用绝对定位的伪元素模拟下划线，并通过缩放控制展开方向。直接对 border-bottom 或 text-decoration 做过渡，无法实现“从中点出发”的动画——它们默认是从左到右渲染或过渡。
实操要点：
- 给文字容器（如
<a></a>或<span></span>）设position: relative，为伪元素提供定位上下文 -
::after伪元素设content: ""、position: absolute、bottom: 0、left: 50%、transform: translateX(-50%) scaleX(0)，初始缩放为 0 且居中 - 悬停时将
scaleX(1)，配合transition: transform 0.3s ease - 必须显式设置
width（如width: 100%），否则scaleX在无宽元素上无效
为什么 transform: scaleX() 要搭配 translateX(-50%)
如果不加 translateX(-50%)，scaleX() 默认以元素左上角为原点缩放，会导致下划线从左侧向右“拉伸”，而非从中心向两边“展开”。加上 translateX(-50%) 把伪元素的起点挪到父容器水平中心，再用 scaleX() 缩放，视觉上就是从中点均匀向左右延伸。
常见错误：
- 只写
transform: scaleX(0)，没配translateX(-50%)→ 动画偏左 - 伪元素没设
width→scaleX无变化，动画不触发 - 父容器未设
position: relative→::after脱离文字位置，下划线飘走
transition-timing-function 影响展开的“自然感”
用 ease 或 cubic-bezier(0.34, 1.56, 0.64, 1) 比 linear 更符合“展开”直觉：起始稍慢，中间加速，末端收束。如果用 ease-in-out，反而像弹性回弹，偏离“铺开”本意。
可直接套用：
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
这个贝塞尔曲线在多数字体大小和行高下表现稳定；若文字特别短（如单个字母），可微调时间为 0.2s 避免拖沓。
响应式与多行文本的兼容处理
上述方案默认只适配单行文本。遇到换行或响应式字号变化时，容易出现下划线长度错位或位置偏移。
应对方式：
- 对多行文本，改用
background-image: linear-gradient()+background-size控制宽度，但动画需用background-position模拟展开，复杂度上升 - 更稳妥的做法：限制容器为
white-space: nowrap，或用display: inline-block+max-width防止折行 - 字号动态变化时，把伪元素的
height和bottom改为em或ex单位（如bottom: 0.15em），比固定px更健壮
真正难的不是写出来，而是让下划线始终紧贴字体基线、不随字重或字体族切换而跳动——这得靠反复试 bottom 和 height 的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
