CSS :after behind parent element

Question

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:

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?

Slavenko Miljic · Answer 1 · 2015-12-09T23:01:05.170

You can place the :after element behind its parent if you wrap its parent inside another element. What happens is that the :after is ignoring the positioning on its parent, but it will apply positioning on the next parent in the hierarchy.

HTML

    <div class="wrap">
        <a href="" class="btn blue">
            <span>Bekijk op facebook</span>
            <span class="fa fa-arrow-circle-right"></span>
        </a>
    </div>

CSS

.wrap{
    position:relative;
    z-index:1;
}

.btn{
    /* remove position:relative; */
}

But, box-shadow solution in timothym answer, would be a bit more suitable for this specific case, not sure how would that fit with the rest of your website.

score 4 · Answer 2 · edited May 23 '17 at 12:16

4

A :before or :after pseudo-element is considered a child element, and due to the stacking context of the elements, an :after element can't be displayed behind its parent in this way.

However, you can use box-shadow to create a solid 'border' that achieves the effect you are going for. Here's an example:

.btn{
  box-shadow: red 6px 7px 0 0;
}

edited May 23 '17 at 12:16

Community

1
1

answered Dec 09 '15 at 22:50

timothym

2,853
5
19
26

Marc Audet · Accepted Answer · 2015-12-09T22:59:29.380

2

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.

edited Dec 09 '15 at 22:59

answered Dec 09 '15 at 22:54

Marc Audet

46,011
11
63
83

1

Thanks for your reply. I've added the z-index in my live site later to see if it could make any difference. I'll have to put another z-index on the parent container of the button to make it work like you site instead of on the button itself. Problem solved, thanks! – ronnyrr Dec 10 '15 at 09:32

CSS :after behind parent element

3 Answers3

Linked