如何阻止CSS hover过渡反向触发，改为下划线渐变为黑色？

要实现你想要的效果——悬停时下划线从左到右变灰，移开时渐变回黑色而非反向动画——我们可以调整伪元素的过渡逻辑，把宽度变化和颜色变化结合起来，避免反向的宽度收缩动画。这里提供一个修改后的CSS方案：

a.btn--tertiary { 
  padding-left: 0; 
  padding-right: 0; 
  background-color: transparent; 
  color: #000; 
  border: 0; 
  position: relative; 
  padding-bottom: 5px; 
  text-transform: uppercase; 
  text-decoration: none; 
  font-size: 40px; 
}

.btn--tertiary:after { 
  content: ''; 
  height: 2px; 
  width: 100%; 
  /* 初始状态：黑色下划线，叠加一个宽度为0的灰色渐变层 */
  background-color: #000;
  background-image: linear-gradient(grey, grey);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  position: absolute; 
  bottom: 0; 
  left: 0;
  /* 初始过渡规则：只触发宽度变化 */
  transition: background-size 1s cubic-bezier(0.100, 0.600, 0.350, 1.000) 0s,
              background-color 0s;
  z-index: 2; 
}

/* 悬停状态：灰色渐变层宽度从0过渡到100%，实现从左到右变灰 */
.btn--tertiary:hover:after, .btn--tertiary:focus:after { 
  background-size: 100% 100%;
  transition: background-size 1s cubic-bezier(0.100, 0.600, 0.350, 1.000) 0s;
}

/* 移开状态：先让渐变层颜色从灰过渡到黑，保持宽度100%；颜色过渡完成后再重置宽度 */
.btn--tertiary:not(:hover):not(:focus):after {
  background-color: grey;
  transition: background-color 1s cubic-bezier(0.100, 0.600, 0.350, 1.000) 0s,
              background-size 0s 1s;
}

方案原理 #

1. 初始状态：伪元素after以黑色为底色，叠加一个宽度为0的灰色渐变层，视觉上就是黑色下划线。
2. 悬停动画：通过background-size从0%过渡到100%，让灰色渐变层从左到右覆盖黑色底色，实现你要的“从左到右变灰”效果。
3. 移开行为：利用:not(:hover):not(:focus)选择器定义移开时的样式：
   • 先让渐变层的background-color从灰色过渡到黑色（保持100%宽度），这样视觉上就是整个下划线慢慢变回黑色；
   • 颜色过渡完成后（通过1s延迟），再把background-size重置为0%，回到初始状态（此时颜色已经是黑色，视觉上和初始下划线完全一致）。

这个方案彻底避免了原来的反向宽度收缩动画，完美实现了你想要的“渐变回黑色”的效果。

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