为何CSS的overflow:hidden会隐藏按钮边框？hover动画异常求助

练习CSS动画与过渡效果时，制作的.border-4-but类按钮hover效果异常：设置overflow:hidden后，按钮底部和右侧边框被隐藏，怀疑和父元素body设置grid且align-items:center有关。预期的边框展开效果：

• top：从左到右显现
• right：从上到下显现
• bottom：从左到右显现
• left：从下到上显现
  修改overflow属性无效，需要问题原因分析及替代解决方案。

1. 伪元素尺寸溢出：原代码中伪元素设置了width:100%和height:100%，同时添加border后，边框宽度会让元素实际尺寸超出父容器（比如border-right:2px会让伪元素宽度比父容器宽2px），加上overflow:hidden直接切掉了超出部分。
2. Grid布局放大了问题：body的grid+align-items:center布局本身不直接导致问题，但会让伪元素的溢出边界更明显，核心矛盾还是伪元素的尺寸计算错误，没有贴合父容器边界。

调整伪元素的尺寸、定位方式，用背景色替代边框属性，避免尺寸溢出，同时保留预期动画效果：

修改后的CSS代码 #

.border-4-but {
  margin-top: 20px;
  position: relative;
  color: deepskyblue;
  padding: 10px 20px;
  overflow: hidden;
  box-sizing: border-box; /* 确保padding不影响尺寸计算 */
}

/* 上边框：从左到右显现 */
.border-4-but:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 2px;
  width: 100%;
  background-color: deepskyblue;
  transition: left 1s;
}

/* 右边框：从上到下显现 */
.border-4-but:after {
  content: "";
  position: absolute;
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: deepskyblue;
  transition: top 1s;
}

/* 下边框：从左到右显现 */
.border-4-but span:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 100%;
  height: 2px;
  width: 100%;
  background-color: deepskyblue;
  transition: left 1s;
}

/* 左边框：从下到上显现 */
.border-4-but span:before {
  content: "";
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: deepskyblue;
  transition: bottom 1s;
}

/* hover触发动画 */
.border-4-but:hover:before {
  left: 0;
}
.border-4-but:hover:after {
  top: 0;
}
.border-4-but:hover span:after {
  left: 0;
}
.border-4-but:hover span:before {
  bottom: 0;
}

修改说明 #

• 用background-color替代border属性，同时给每个伪元素设置单一方向的尺寸（比如上边框仅设置height:2px），彻底避免尺寸溢出父容器。
• 调整伪元素的定位基准：上边框贴顶部、右边框贴右侧、下边框贴底部、左边框贴左侧，确保动画路径完全在父容器范围内。
• 拆分hover状态的过渡属性，只过渡需要变化的left/top/bottom，提升动画性能。
• 添加box-sizing:border-box，确保父容器的padding不会干扰尺寸计算。

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