如何实现hover时边框从左到右展开，移开时同方向收缩？

你只需要修改伪元素的transform逻辑，不用依赖transform-origin，改用translateX就能实现需求：

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  width: 100%;
  transform: translateX(-100%); /* 初始状态向左偏移100%，完全隐藏 */
  transition: transform 250ms ease-in-out;
}

h1.fromLeft:hover:after {
  transform: translateX(0); /* hover时偏移归位，从左到右展开 */
}

<h1 class="fromLeft">Expand from left</h1>

原理说明 #

• 初始状态下，伪元素宽度设为100%，通过translateX(-100%)将其完全向左偏移，视觉上隐藏。
• 鼠标hover时，translateX(0)让伪元素从左向右移动归位，形成从左到右的展开动画。
• 鼠标移开时，伪元素从translateX(0)变回translateX(-100%)，呈现左侧先消失、右侧最后消失的左到右收缩效果。

内容的提问来源于stack exchange，提问作者Tyler Delmas