CSS hover下transition搭配border-radius动画不流畅 取消hover伪元素溢出

问题根因 #

该异常由两个CSS过渡配置遗漏导致：

• 按钮基础样式未设置overflow: hidden，:after伪元素超出按钮边界的内容没有被裁剪，直接暴露在视野中
• 非hover状态的border-radius未被加入过渡属性列表，取消hover时圆角会瞬间恢复默认值，和:after伪元素的位移动画不同步，视觉上就会出现方形溢出块

修复方案 #

按优先级依次调整即可解决：

1. 给按钮基础样式新增overflow: hidden，强制裁剪所有超出按钮边界的内容，从容器层面杜绝伪元素溢出的可能

.target-button {
  /* 保留原有样式，新增以下属性 */
  overflow: hidden;
}

2. 统一按钮的过渡属性配置，确保border-radius和:after伪元素的过渡属性、时长、缓动函数完全一致，避免动画不同步

.target-button {
  /* 示例：将border-radius加入过渡列表，和伪元素过渡规则对齐 */
  transition: transform 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
}

3. 可选优化：给:after伪元素添加继承配置，自动同步按钮的圆角和过渡规则，减少重复代码

.target-button::after {
  border-radius: inherit;
  transition: inherit;
}

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