border-width不支持方向性过渡动画，因其变更触发重排且无法指定起始点；需用伪元素+width或transform模拟，如::after设position:absolute、width:0→100%实现从左向右延伸。
直接用 border 属性无法做出「从左向右延伸」或「从中心展开」的边框动画——浏览器不支持 border-width 的部分方向过渡，也不允许对单条边做长度缩放。必须用伪元素模拟边框，再靠 width + transition 控制伸展过程。
为什么不能直接 transition border-width
常见错误是写这样的代码：
.btn:hover { border-bottom-width: 3px; transition: border-bottom-width 0.3s; }
它会触发重排（layout），性能差；更关键的是，border-bottom-width 变化时，整个元素尺寸会抖动，且无法控制「从哪开始延展」。浏览器对单边宽度的插值也不稳定，尤其在小数值（如 0.7px）下容易锯齿或跳帧。
-
border-width动画本质是 layout 变更，不是绘制层变化 - 无法指定起始点（比如从 left 开始铺，或从 center 向两边开）
- 多行文本或 flex 容器中，父级约束会让 border 行为不可控
::before 或 ::after 模拟下边框并控制 width
这是最稳妥、兼容性最好（Chrome/Firefox/Safari/Edge 全支持）的做法。核心是：给容器设 position: relative，伪元素绝对定位到底部，初始 width: 0，悬停时过渡到 width: 100%。
立即学习“前端免费学习笔记（深入）”；
- 必须设
content: ""，否则伪元素不渲染 - 伪元素需
display: block（inline 不支持 width 过渡） - 用
bottom: -2px控制离文字距离，数值要匹配字体大小和line-height - 过渡必须写在伪元素上：
.link::after { transition: width 0.3s ease; }，写在父元素上无效
示例片段：
.link { position: relative; }
.link::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease;
}
.link:hover::after { width: 100%; }
想实现「从中间向两边」或「从右向左」延伸怎么办
靠 left 和 transform 微调即可，不用改结构：
- 从中间展开：
left: 50%; transform: translateX(-50%);，hover 时仍设width: 100% - 从右向左：
right: 0; width: 0;，hover 时width: 100%; right: auto; left: 0; - 注意：如果容器有 padding，伪元素的
left/right要对应调整，否则延伸会超出可视范围
移动端 Safari 的闪烁与多语言混排坑
这个方案在桌面端很稳，但两个实际问题容易被忽略：
- iOS Safari 对
width动画在 inline 元素后代中偶有渲染闪烁，加-webkit-backface-visibility: hidden到伪元素可缓解 - 中英文混排时，伪元素的
100%是按容器宽度算的，但中文无空格、英文单词间有空格，导致「视觉上没铺满」或「铺过头」；这时width就不如transform: scaleX()稳定——后者基于自身锚点缩放，不受文本流干扰
真正在意多语言兼容或需要像素级对齐时，width 方案就得让位给 scaleX + transform-origin 组合。
