将伪元素置于背景和主要内容之间

问题描述

我正在使用锚标记制作按钮。我想产生效果，但是效果不理想。伪元素在按钮上流动，文本也被隐藏。但是我想要这样的东西，伪元素将位于按钮和背景之间。

I am making buttons by using the anchor tag. I want to make an effect but it is not working as expected. pseudo-element is flowing over the button and text is also being hidden as well. But I want something like this, the pseudo-element will be in between the button and background.

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

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

我喜欢这样做，伪元素背景将适合悬停时的按钮大小。
也将显示按钮文本，但我发现z-index混乱在其他地方。

I like to do, the pseudo element background will be fit to button size on hover.And the button text will also be seen but i thing z-index is messed up somewhere or anything else.

推荐答案

z-index 1 您的亲戚 .button-type-1 和 -1 ：after 伪。

另外，将按钮内联块防止：after 元素溢出

z-index 1 your relative .button-type-1 and -1 the :after pseudo.
Also, make your button inline-block to prevent the :after element overflow

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

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

这篇关于将伪元素置于背景和主要内容之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！