伪元素：父div的border-radius之前

Question

我有一个 div，当你将其悬停时，颜色会通过改变元素的宽度而改变:before。问题是 div 有弯曲边框，而:before元素没有。

如何使:before元素不绘制在 div 的边框上？

.btn {
  position: relative;
  z-index: 0;
  background-color: grey;
  border: 2px solid black;
  width: 280px;
  height: 100px;
  border-radius: 40px;
  text-align: center;
}

.btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleY(0);
  transition: 1s;
}

.btn:hover:before {
  transform: scaleY(1);
  background-color: blue;
}

<div class="btn">
  Hover me and look to the sides
</div>

Answer 1

添加overflow: hidden;到按钮。