如何用background-clip裁剪skew变换后的::after伪元素适配a标签按钮

API 探路者

2026-10-6

解决方案

要解决伪元素溢出的问题，只需要给按钮元素添加overflow: hidden属性即可，该属性会将所有超出按钮盒子边界的内容裁剪掉，刚好可以限制变形后的伪元素显示范围。你之前把overflow: hidden写在伪元素上是无效的，该属性需要设置在父容器上才会对子元素（包括伪元素）生效。

你要实现的斜切滑入悬停动效可以通过调整伪元素的默认状态和hover状态的transform属性完成，以下是完整可运行的代码：

@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: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #777;
  z-index: -1;
  /* 默认状态：斜切 + 横向缩放为0，隐藏 */
  transform: skewX(-30deg) scaleX(0);
  /* 可选：调整动画展开方向，left为从左到右，right为从右到左 */
  transform-origin: left;
  transition: transform 200ms ease-in;
}

/* 新增：hover状态下展开伪元素 */
#hover-skew:hover::after {
  transform: skewX(-30deg) scaleX(1.3);
}