html - 在按钮文本上放置阴影线

Question

我想在链接或按钮上放置阴影线。有点扁平化的风格。你可以在这里看到这个已经实现

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;
}

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

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

Answer 1

将 :after z-index 设置为 -1。进一步向后发送

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