伪元素的背景剪辑

Question

我有一个按钮（实际上是一个使用<a>的链接）。 我必须使用一个伪元素，即::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>

注意到它是如何溢出的吗？ 我希望它与盒子一样大小。

我知道我使用了scale ，但这没关系，还要澄清一下，我使用scale就像我使用 skew 一样，所以缩放使其适合盒子。

还要澄清一下，我使用了skew以便我将::after元素缩放到 0，并将它缩放到 1 on :hover以创建一个很好的效果。

我正在尝试复制本网站上 hover 按钮的样式，但使用<a>标记，因此如果您有任何其他方法，请发表评论。 谢谢。

Answer 1

这是一个例子：

 @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>

有用的来源：伪元素 hover