本文详解如何使用 background-image + background-size + background-position-x 组合，替代传统 transform: scalex()，实现边框（如下划线）在 hover 进入和离开时均从左向右动画的效果。
本文详解如何使用 background-image + background-size + background-position-x 组合，替代传统 transform: scalex()，实现边框（如下划线）在 hover 进入和离开时均从左向右动画的效果。
要实现“悬停时边框从左到右出现，鼠标移开时边框仍从左到右消失”这一反直觉但视觉更连贯的效果，关键在于避免依赖缩放方向反转（如 scaleX(0) → scaleX(1)）——因为后者在退出时默认会反向缩放（右→左收缩）。真正的解法是：用背景渐变模拟下划线，并通过控制背景尺寸与起始位置的协同变化，制造“始终左进左出”的动效错觉。
以下是推荐实现方案（兼容单行/多行文本，语义清晰，性能优异）：
h1 {
position: relative;
margin: 0;
color: #666;
display: inline-block;
text-transform: uppercase;
/* 可选：防止换行影响动画 */
white-space: nowrap;
}
.from-left {
/* 创建一条高度为 0.9 行高的纯色下划线（透明过渡避免锯齿） */
background-image: linear-gradient(to bottom, transparent 0.9lh, #019fb6 0.9lh);
background-repeat: no-repeat;
background-size: 0% 2px; /* 宽度 0%，高度固定为 2px（或适配 border-bottom 原尺寸） */
background-position: left bottom; /* 初始锚点在左下角 */
transition: background-size 0.25s ease-in-out,
background-position 0.25s ease-in-out;
}
.from-left:hover {
background-size: 100% 2px; /* 宽度扩展至 100% */
background-position: left bottom; /* 锚点保持左对齐 → 视觉上始终从左开始绘制 */
}
<h1 class="from-left">Expand from left</h1>
✅ 核心原理说明：
- background-image 使用 linear-gradient 在垂直方向生成一条细线（替代 border-bottom），规避了 border 无法独立控制动画起点的限制；
- background-size: 0% → 100% 控制线条宽度伸缩，而 background-position: left bottom 始终将“绘制起点”锁定在左侧——因此无论尺寸增大或缩小，视觉动效都表现为从左向右延伸或回缩；
- 两个 transition 属性同时作用于 background-size 和 background-position，确保进出动画节奏一致、无跳变。
⚠️ 注意事项：
- 若需支持多行文本（如
内含换行），请移除 white-space: nowrap，并改用 background-position: left bottom（已默认生效），该方案天然支持多行背景定位；
- 0.9lh 中的 lh 是相对行高单位（CSS Level 4），现代浏览器广泛支持；若需兼容旧版，可替换为固定值如 1.8px（配合 font-size: 20px; line-height: 2 推算）；
- 避免对 :after 伪元素使用 transform-origin 调整缩放中心——这是导致“退出反向动画”的根源，本方案完全绕过 transform，更可控、更符合设计意图。
此方法不仅解决了原始需求，还具备更好的可维护性、跨浏览器稳定性及动画性能（background-size 和 background-position 属于可硬件加速属性）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
