用::before伪元素画边框线并配合transform实现延伸动画，比直接动画border-width更高效可控，因后者触发重排且不可单独控制生长方向，而transform不触发重排、支持GPU加速。
直接说结论：用 ::before 伪元素画边框线，再通过 transform: translateX() 或 scaleX() 配合 transition 或 @keyframes 实现延伸动画，比纯 border 动画更可控、更轻量。
为什么不用 border + width 动画？
直接对 border-width 做 CSS 动画会触发重排（layout），性能差；而且无法单独控制某一边的“生长”方向（比如只让底边从左向右伸）。::before 伪元素是独立渲染层，只做 transform 不影响布局，GPU 加速也更稳。
常见错误现象：border-bottom: 2px solid #000; animation: grow 0.4s; 配合 @keyframes grow { from { border-bottom-width: 0; } } —— 这根本不会动，因为 border-width 不是可动画的 CSS 属性（除非用 transition 配合 JS 切换 class，但依然重排）。
使用场景：导航栏下划线、卡片 hover 边框延伸、表单输入框聚焦指示线。
用 ::before 画线并位移实现「从左到右」延伸
核心思路：伪元素初始宽度为 0，定位在目标边（如 bottom），left 设为 0，再用 transform: translateX() 把它“拉出来”。
- 确保父容器有
position: relative，否则::before会相对于 body 定位 -
::before设content: ""、display: block、height: 2px（或你想要的粗细） - 关键参数：
width: 100%（定义最大长度），transform: translateX(-100%)（起始藏在左边外），transition: transform 0.3s ease-out - hover 时设
transform: translateX(0)，线条就平滑滑入
.line-trigger {
position: relative;
}
.line-trigger::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #333;
transform: translateX(-100%);
transition: transform 0.3s ease-out;
}
.line-trigger:hover::before {
transform: translateX(0);
}
用 scaleX() 实现中心向两侧延伸
适合 logo 下方居中线条、按钮焦点线等对称动效。比位移更简洁，且无需计算偏移量。
性能上 scaleX() 和 translateX() 差不多，但要注意：如果伪元素本身有 border-radius 或阴影，scale 会一并缩放，而 translate 不会。
- 伪元素
width: 100%，但初始transform: scaleX(0)，锚点默认在中心（transform-origin: center） - hover 时设
transform: scaleX(1)，线条从中点向左右同时展开 - 若想从左端开始向右伸展，加
transform-origin: left
.center-line::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 100%;
height: 2px;
background: #007bff;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.center-line:hover::before {
transform: scaleX(1);
}
容易被忽略的兼容性与细节
::before 动画在 IE11+、Edge 12+、Chrome 4+、Firefox 4+ 都支持，但注意两个坑：
-
transform在 Safari 旧版本（-webkit-transform 前缀，尤其用scaleX()时 - 如果父元素用了
will-change: transform，可能干扰伪元素动画表现，建议只加在伪元素自身上（::before { will-change: transform; }） - 移动端 touch 触发时，hover 可能延迟或不触发，应搭配
:active或用 JS 添加is-hoveredclass 更可靠
真正复杂的地方不在写法，而在——你得想清楚线条该从哪开始、往哪伸、停在哪，以及是否要和文字/图标节奏同步。这些没法靠代码自动推导，得靠预览反复调 transition-timing-function 和时长。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
