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

Question

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将overflow: hidden;添加到按钮。