html - 伪元素 :before border-radius of parent div

Question

我有一个 div，当您将鼠标悬停在他身上时，颜色会通过改变 :before 元素的宽度而改变。问题是 div 有 flex 的边框而 :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; 到按钮。