在按钮文本下降被排行的阴影

Question

我想在链接或按钮上放置阴影。一种平面样式。你可以在这里看到这个实现

＆＃13;

＆＃13;

a.button {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  font-family: arial;
}

a.button:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  right: 0px;
  bottom: 0;
  border: 3px solid #000;
}

a.button:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  border: 3px solid red;
  right: -6px;
  bottom: -6px;
}

a.button:hover:after {
  background-color: green;
  border: 3px solid green;
}

＆＃13;

<a href="#" class="button">Click Here</a>

＆＃13;

＆＃13;

＆＃13;

但问题是框和阴影在按钮文本上重叠，因此按钮文本不可见。有没有办法解决这个问题？我不想添加任何额外的html标签，例如span，因为链接将使用Wordpress自动生成。这就是为什么我使用了之前伪伪css。

Answer 1

设置：z-index为-1之后。进一步向后发送

a.button:after {
    z-index: -1;
}