将伪元素保留在背景和主要内容之间

Question

我正在使用锚标签制作按钮。我想要产生效果，但它没有按预期工作。伪元素流过按钮，文本也被隐藏。但是我想要这样的东西，伪元素将位于按钮和背景之间。

＆＃13;

＆＃13;

section {
  padding: 80px 0;
}

section.one {
  background: #76B39D;
}

.button {
  color: white;
  margin: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.button-type-1 {
  border: 2px solid #fff;
  padding: 10px 33px;
  overflow: hidden;
  position: relative;
}

.button-type-1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  z-index: 0;
  transition: all 0.4s ease;
}

.button-type-1:hover:after {
  width: 200px;
  height: 200px;
}

.button-type-1:hover,
.button-type-1:focus {
  text-decoration: none;
}

＆＃13;

<section class="one">
  <a href="" class="button button-type-1">read</a>
</section>

＆＃13;

＆＃13;

＆＃13;

我喜欢这样做，伪元素背景将适合悬停时的按钮大小。 按钮文本也会被看到，但我的东西z-index在某处或其他任何地方搞砸了。

Answer 1

z-index 1您的亲戚.button-type-1和-1 :after伪。
另外，按下inline-block按钮可以防止:after元素溢出

＆＃13;

＆＃13;

section {
  padding: 80px 0;
}

section.one {
  background: #76B39D;
}

.button {
  color: white;
  margin: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.button-type-1 {
  border: 2px solid #fff;
  padding: 10px 33px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  z-index:1;
}

.button-type-1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.4s ease;
}

.button-type-1:hover:after {
  width: 200px;
  height: 200px;
}

.button-type-1:hover,
.button-type-1:focus {
  text-decoration: none;
  color:#000;
}

＆＃13;

<section class="one">
  <a href="" class="button button-type-1">read</a>
</section>

＆＃13;

＆＃13;

＆＃13;