Search code examples
cssz-indexbehind

CSS :after behind parent element

Is it possible to get a CSS pseudo :after element behind the background of it's parent element?

The background of the :after contains equal dimensions as the parent element's background. So currently it looks like this:

enter image description here

But I want the red background (:after) to go behind the parent element. So I've added position: relative to the parent and absolute to the pseudo element.

Trying to archive this I've used this code:

.btn {
  position: relative;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
}

.btn:after {
  position: absolute;
  bottom: -0.3rem; right: -0.3rem;
  z-index: -1;

  width: 100%; height: 100%;
  content:'';
  background: red;
}
<a href="" class="btn">
  This is my button
</a>

The weird thing is that above snippet works like charm. But in my live example the exact same code displays as the image in this topic.. Someone knows what is wrong in the live site?

Solution

  • In your website, you have the following CSS rule:

    .btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

    If you remove the z-index: 1 property, your CSS will work correctly. This property is not in the sample snippet that you provided above.

    I tried it out using CSS inspector in Firefox and that seems to fix the issue.