由'before'css元素隐藏的文本

Question

我正在尝试复制我在另一个网站上看到的内容，但目前我之前的元素隐藏了我的文字。我能做些什么来解决它吗？

这是一个例子：

body {margin: 20px;}

a {
  padding: 120px;
  position: relative;
  color: white;
  overflow: hidden;
  display: inline-block;
  font-size: 16px;
}

#hello:before {
  background-color: #4541f1;
  position: absolute;
  top: 0;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
}

#hello:hover::before {
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  transform: perspective(100px) translateZ(-50px);
}

<a href="#" id="hello">Test</a>

Answer 1

添加否定z-index以将该图层推送到“父级”下方。

body {
  margin: 20px;
}

a {
  padding: 120px;
  position: relative;
  color: white;
  overflow: hidden;
  display: inline-block;
  font-size: 16px;
}

#hello:before {
  background-color: #4541f1;
  position: absolute;
  top: 0;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* this here */
}

#hello:hover::before {
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  transform: perspective(100px) translateZ(-50px);
}

<a href="#" id="hello">Test</a>

Answer 2

使用z-index查看文本

body {margin: 20px;}

a {
  padding: 120px;
  position: relative;
  color: white;
  overflow: hidden;
  display: inline-block;
  font-size: 16px;
}

#hello:before {
  background-color: #4541f1;
  position: absolute;
  top: 0;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#hello:hover::before {
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  transform: perspective(100px) translateZ(-50px);
}

<a href="#" id="hello">Test</a>

Answer 3

将z-index: -1添加到：伪元素之前。

body {margin: 20px;}

a {
  padding: 120px;
  position: relative;
  color: white;
  display: inline-block;
  font-size: 16px;
}

#hello:before {
  background-color: #4541f1;
  position: absolute;
  top: 0;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#hello:hover::before {
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  transform: perspective(100px) translateZ(-50px);
}

<a href="#" id="hello">Test</a>

Answer 4

简单。在z-index:-1;中添加#hello:before。

body {margin: 20px;}

a {
  padding: 120px;
  position: relative;
  color: white;
  overflow: hidden;
  display: inline-block;
  font-size: 16px;
}

#hello:before {
  background-color: #4541f1;
  position: absolute;
  top: 0;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  z-index:-1;
}

#hello:hover::before {
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  transform: perspective(100px) translateZ(-50px);
}

<a href="#" id="hello">Test</a>

Answer 5

您可以通过在before元素

上添加z-index: -1来解决此问题

body {margin: 20px;}

a {
  padding: 120px;
  position: relative;
  color: white;
  overflow: hidden;
  display: inline-block;
  font-size: 16px;
  z-index: 1;
}

#hello:before {
  background-color: #4541f1;
  position: absolute;
  top: 0;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#hello:hover::before {
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  transform: perspective(100px) translateZ(-50px);
}

<a href="#" id="hello">Test</a>