按钮::after背景左滑右出遮挡文本的解决方法咨询

你的问题出在绝对定位的::after伪元素默认堆叠层级高于按钮内的文本内容，导致滑动背景会盖住文字。虽然你尝试了z-index: -1，但因为按钮本身设置了background-color: grey，伪元素会被按钮的背景层遮挡，所以看不到效果。

下面提供两种可行的解决方法：

方法一：给文本添加层级容器 #

通过在按钮文本外层包裹<span>，给这个span设置相对定位和更高的z-index，让文本始终在伪元素上方：

修改后的HTML： #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>
<body>
  <button><span>button</span></button>
</body>
</html>

修改后的CSS： #

body {
  text-align: center;
}

button {
  position: relative;
  padding: 10px 25px;
  font-size: 40px;
  margin-top: 100px;
  border: 2px solid black;
  background-color: grey;
  border-radius: 20px;
  box-shadow: 0 0 0 2px white, 0 0 0 4px black;
  overflow: hidden;
  color: black;
  transition: 0.25s 0.05s linear;
}

button span {
  position: relative;
  z-index: 1; /* 让文本层级高于伪元素 */
}

button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  bottom: 0;
  left: 0;
  background-color: #000;
  transition: 0.3s linear;
}

button:hover::after {
  width: 100%;
}

button:hover {
  color: white;
}

方法二：调整按钮背景与伪元素层级 #

去掉按钮的background-color，让伪元素同时承担初始背景和hover滑动效果，通过z-index: -1将伪元素置于文本下方：

修改后的CSS： #

body {
  text-align: center;
}

button {
  position: relative;
  padding: 10px 25px;
  font-size: 40px;
  margin-top: 100px;
  border: 2px solid black;
  /* 移除原有背景色 */
  border-radius: 20px;
  box-shadow: 0 0 0 2px white, 0 0 0 4px black;
  overflow: hidden;
  color: black;
  transition: 0.25s 0.05s linear;
}

button::after {
  content: "";
  position: absolute;
  width: 100%; /* 初始宽度100%，作为默认背景 */
  height: 100%;
  bottom: 0;
  left: 0;
  background-color: grey; /* 初始背景色 */
  z-index: -1; /* 置于文本下方 */
  transition: 0.3s linear;
}

button:hover::after {
  background-color: #000; /* hover时切换背景色 */
}

button:hover {
  color: white;
}

如果要严格保留从左到右的滑动展开效果，方法一的兼容性和实现逻辑更简单，推荐使用第一种方案。

内容的提问来源于stack exchange，提问作者jasper93