如何通过transform-origin实现伪元素从左侧进入、右侧退出的CSS过渡效果？现有代码效果不符求助

我懂你想要的那种丝滑效果：鼠标悬停时下划线从左侧慢慢滑入，移开时又从右侧收回去。现在你的代码里的transform-origin设置逻辑有点小偏差，导致效果和预期相反，咱们来调整一下就能搞定！

问题根源 #

你当前的初始状态把transform-origin设为right，同时transform: scaleX(0)——这意味着下划线是从右侧开始隐藏的，所以hover时放大的话，自然是从右侧往左侧展开，和你想要的方向相反。而且移出时没有动态切换transform-origin，所以退出方向也不对。

修正后的代码 #

只需要调整CSS里的transform-origin和过渡逻辑：

ul li { 
  list-style: none; 
  display: inline-block; 
  padding: 0 20px; 
}
.fancy-link { 
  color: black; 
  font-weight: 700; 
  text-decoration: none; 
  position: relative;
}
/* 初始状态：下划线从左侧隐藏 */
.fancy-link::after { 
  content: ''; 
  position: absolute; 
  width: 100%; 
  height: 2px; 
  background-color: blue; 
  left: 0; 
  bottom: 0; 
  transform: scaleX(0); 
  transform-origin: left; /* 初始原点设为左侧 */
  transition: transform 0.5s ease-in-out, transform-origin 0s 0.5s; /* 原点延迟切换，等过渡结束再变 */
}
/* hover时：从左侧滑入 */
.fancy-link:hover::after { 
  transform: scaleX(1); 
  transform-origin: left; /* 保持左侧原点，让下划线从左到右展开 */
  transition: transform 0.5s ease-in-out, transform-origin 0s; /* hover时立即切换原点 */
}

HTML部分不用改动，还是原来的结构：

<nav>
  <ul>
    <li><a class="fancy-link" href="#">Home</a></li>
    <li><a class="fancy-link" href="#">Services</a></li>
    <li><a class="fancy-link" href="#">Projects</a></li>
    <li><a class="fancy-link" href="#">About</a></li>
    <li><a class="fancy-link" href="#">Contact</a></li>
  </ul>
</nav>

逻辑解释 #

1. 初始状态：下划线scaleX(0)，原点在左侧，意味着它是从左边开始缩成一条线的。
2. hover时：我们让transform: scaleX(1)，同时保持原点在左侧，这样下划线就会从左到右慢慢展开。
3. 移出时：通过给transform-origin设置延迟过渡，确保下划线在开始收缩前，原点已经切换到右侧——这样收缩的时候就会从右往左慢慢消失，完美符合你的预期！

现在试试这个代码，应该就能得到你想要的从左进入、从右退出的过渡效果啦～

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