如何让button:after与button:before同显？实现按钮4条hover线条效果

要实现四条边的滑入动画，仅靠button:before和button:after无法覆盖四条线，我们可以给父容器添加伪元素来补充左右竖线，同时修复你现有代码的定位问题，以下是完整实现方案：

.buttonY {
  position: relative;
  display: inline-block;
}

.buttonY button {
  background-color: transparent;
  border: none;
  position: relative;
  width: 400px;
  height: 120px;
  text-transform: uppercase;
  line-height: 120px;
  text-align: center;
  color: #4e1414;
  font-size: 45px;
  letter-spacing: 15px;
  overflow: hidden;
  cursor: pointer;
}

/* 顶部线条：从左侧滑入 */
.buttonY button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 4px;
  background-color: #4e1414;
  transition: all 0.5s ease;
}

/* 底部线条：从右侧滑入 */
.buttonY button::after {
  content: '';
  position: absolute;
  bottom: 0; /* 替换top:100%，让线条紧贴按钮底部并被overflow裁剪 */
  right: -100%;
  width: 100%;
  height: 4px;
  background-color: #4e1414;
  transition: all 0.5s ease;
}

/* 左侧线条：从上方滑入 */
.buttonY::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #4e1414;
  transition: all 0.5s ease;
}

/* 右侧线条：从下方滑入 */
.buttonY::after {
  content: '';
  position: absolute;
  bottom: -100%;
  right: 0;
  width: 4px;
  height: 100%;
  background-color: #4e1414;
  transition: all 0.5s ease;
}

/* hover触发所有线条滑入 */
.buttonY:hover button::before {
  left: 0;
}

.buttonY:hover button::after {
  right: 0;
}

.buttonY:hover::before {
  top: 0;
}

.buttonY:hover::after {
  bottom: 0;
}

核心修复说明 #

1. 修正底部线条定位：你之前用top:100%会让线条位于按钮外部，超出overflow:hidden的作用范围，改用bottom:0让线条紧贴按钮底部，初始的right:-100%才能被正确裁剪并触发滑入动画。
2. 补充左右竖线：通过父容器.buttonY的两个伪元素实现左右两条竖线，搭配按钮自身的伪元素实现上下横线，凑齐四条线条。
3. 统一动画曲线：使用ease过渡曲线让动画更流畅，匹配参考示例的动效逻辑。

hover按钮时，四条线条会分别从左、右、上、下四个方向滑入并覆盖按钮四边，完全满足你保留四条线且匹配参考动效的需求。

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