伪元素的背景剪辑

我必须使用伪元素。::after

这是没有伪元素的按钮。

@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #788;
}
#hover-skew {
  display: block;
  text-decoration: none;
  color: #ffffff;
  width: 7em;
  padding: 1em;
  background-color: #000000;
  font-size: 30px;
  font-family: Staatliches;
  letter-spacing: 0.3em;
  position: relative;
  z-index: 1;
}

<a href="#" id="hover-skew">Button</a>

注意到它是如何溢出的了吗？我希望它和盒子的原始尺寸一样。

@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #788;
}
#hover-skew {
  display: block;
  text-decoration: none;
  color: #ffffff;
  width: 7em;
  padding: 1em;
  background-color: #000000;
  font-size: 30px;
  font-family: Staatliches;
  letter-spacing: 0.3em;
  position: relative;
  z-index: 1;
}
#hover-skew::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #777;
  z-index: -1;
  transform: skewX(-30deg) scale(1.3, 1);
  -webkit-background-clip: border-box;
  overflow: hidden;
  transition: transform 200ms ease-in;
}

<a href="#" id="hover-skew">Button</a>

我知道我用了比例，但这无关紧要，我要澄清的是，我用了比例，就像我用了倾斜，所以比例使它适合盒子。

同样要澄清的是，我使用了倾斜，这样我将缩放::after元素为0，缩放为1:hover创建一个漂亮的效果。

谢谢你！

下面是一个例子:

有用的来源:

@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #788;
}
#hover-skew {
  display: block;
  text-decoration: none;
  color: #ffffff;
  width: 7em;
  padding: 1em;
  background-color: #000000;
  font-size: 30px;
  font-family: Staatliches;
  letter-spacing: 0.3em;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#hover-skew:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 120%;
  top: 0;
  left: -5%;
  z-index: -1;
  transition: transform .3s ease-out;
  transform: translateX(-100%) skew(-10deg);
  background-color: #777;
}
#hover-skew:hover:after {
  transform: translateX(0) skew(-10deg);
}

<a href="#" id="hover-skew">Button</a>

伪元素徘徊