Is there a way to stack pseudo elements of different parent elements?

Question

I'm trying to create an image box with various graphic elements on it. For this I have the following HTML code:

.image-description:after {
  content: '';
  position: absolute;
  background: #333333;
  opacity: 0.6;
}

.image-box:after {
  content: '';
  position: absolute;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(232, 193, 30, 1) 50%);
  opacity: 0.85;
}

<div class="container">
  <div class="image-box" style="background-image: ... "></div>
  <div class="image-description">
    <h3>xxx</h3>
    <p>xxx</p>
  </div>
</div>

What I want is to display the elements in the following order:

image-box
image-description:after
image-box:after
image-description

So I want to display the linear gradient created in .image-box:after in front of the image-description. Is there a way to put the after of image-box between image-description and image-description:after?

if you need the pseudo elements to be on the same level, why not use an after and a before? ie move the image description after to image box before (or if they need to be on top of the description, move them both to the image description) — Pete, May 16 '19 at 14:42
You can absolutely position the pseudo-elements to wherever you want them. BTW, you should be using `::after`, not `:after`, since at least January 12, 2016, if not earlier. — TylerH, May 16 '19 at 14:59
@TylerH okay, thanks! do i use z-index for that? right now i've set z-index to -1 on image-description::after, 1 on image-box::after and 2 on image-description. But image-box::after is still displayed underneath image-description::after — quikina, May 17 '19 at 07:11
@quikina Be careful with setting negative z-index values; unless you want it hidden entirely (e.g. below the rest of the entire website) it's usually best to keep your floor at 1 (positive values). And as for doing what I suggested; no, you'd use `position: absolute` or `position: relative` along with directional properties `left`, `right`, `top`, `bottom`, to manually place the pseudo element. `z-index` will change the pseudo-elements position along the z axis but not the x or y axis. — TylerH, May 17 '19 at 14:07
@TylerH Oh, sorry, I just realized I didn't make my question clear enough. I want to move the elements exactly on the z axis and have all elements on top of each other. But for some reason I can't place image-description::after under image-box::after. — quikina, May 20 '19 at 06:15

score 0 · Answer 1 · answered May 20 '19 at 14:31

_{(N.B. - I've added some additional styles like backgrounds and borders for visibility purposes.)}

What I want is to display the elements in the following order:

image-box

image-description:after

image-box:after

image-description

Unfortunately I don't think you can do this kind of interplay between siblings and their parents.

You can set a pseudo-element to have a lower z-index than its parent, but you can't set a pseudo-element to have a lower z-index than its cousin. This is because, in order to have the pseudo-element have a lower z-index than its parent, you need to create a new stacking context within that parent, and stacking contexts cannot intermingle.

Thus the best you could hope for would be something like this:

.container {
    border: 2px solid black; padding: 5px; /* These styles are for display purposes only */
    position: relative;
}
.image-box {
    border: 1px solid red; height: 20px; color: red; font-weight: bold; /* These styles are for display purposes only */
    position: relative;
    z-index: -1;
}
.image-box::after {
    content: 'box::after';
    position: absolute;
    left: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(232, 193, 30, 1) 50%);
    opacity: 0.6;
    color: black; font-weight: normal; /* These styles are for display purposes only */
}
.image-description {
    border: 1px solid blue; top: 50px; /* These styles are for display purposes only */
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.image-description::after {
    content: 'description::after';
    position: absolute;
    background: #333333;
    opacity: 0.6;
    top: 0; 
    z-index: -1;
}

<div class="container">
  <div class="image-box">a</div>
  <div class="image-description">
    <h3>xxx</h3>
    <p>xxx</p>
  </div>
</div>

Is there a way to stack pseudo elements of different parent elements?

1 Answers1