CSS悬停效果退出时超出边框问题求助

问题原因 #

你遇到的问题根源在于：hover状态下修改了伪元素的transform-origin，导致进入和退出过渡的变形原点不一致。配合胶囊状的圆角边框（border-radius: 9999px）时，这种原点切换会让伪元素的背景在退出过渡时超出父元素的边框范围。

修复方案 #

保持伪元素的transform-origin固定为底部，只在hover时修改transform属性实现自下而上的展开效果。这样退出过渡会自然从顶部收缩，全程不会破坏圆角的完整性。

修复后的完整代码 #

<div class="container">
  <a href="" class="bg-transition-hover-effect">
    Read More
  </a>
</div>

.container {
  display:flex;
  justify-content: center;
  padding: 3rem;
}

.bg-transition-hover-effect {
  position: relative;
  z-index: 1;
  padding: 0.75rem 1.5rem;
  border: 2px solid black;
  background: transparent;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
}

.bg-transition-hover-effect:hover {
  color: white
}

.bg-transition-hover-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 9999px;
  transition: transform 150ms;
  transform: scaleY(0);
  transform-origin: bottom; /* 固定变形原点为底部 */
  background-color: black;
}

.bg-transition-hover-effect:hover::after {
  transform: scaleY(1); /* 仅调整缩放值，保持原点不变 */
}

原理说明 #

• 把transform-origin固定在底部后，伪元素的缩放始终以底部为基准：
  • hover触发时，scaleY(0)到scaleY(1)的过渡会从底部向上展开黑色背景，完全符合你需要的自下而上动画；
  • hover结束时，scaleY(1)到scaleY(0)的过渡会从顶部向下收缩背景，整个过程中伪元素的圆角始终和父元素的边框对齐，不会出现超出的情况。

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