pseudo-element stacking for animations

Question

I have a ripple effect set to a CSS class using a pseudo selector. I'd like that animation to run from behind the element itself, but I can't manage to find how to do so.

.button {
 width: 50px;
 height: 50px;
 background: lightblue;
 position: absolute;
 top: 50px;
 left: 50px;
}
i.ripple:before {
 content: "";
 position: absolute;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 background: darkorange;
 animation: ripple 2s ease-in infinite;
}
@keyframes ripple {
 0% {transform: scale(1);opacity: .5;}
 100% {transform: scale(8);opacity: 0;}
}

<i class="ripple button">test</i>

If you run the example, you will see that the orange circle is on top of the blue box from the .button class, I'd like it to be behind.

I think this issue is related to this other question: ::before pseudo-element stacking order issue But can't figure out much of it.

score 2 · Accepted Answer · answered Feb 20 '17 at 11:55

2

Set its z-index to -1 and you should be good.

.button {
 width: 50px;
 height: 50px;
 background: lightblue;
 position: absolute;
 top: 50px;
 left: 50px;
}
i.ripple:before {
 content: "";
 position: absolute;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 background: darkorange;
 animation: ripple 2s ease-in infinite;

 z-index:-1;
}
@keyframes ripple {
 0% {transform: scale(1);opacity: .5;}
 100% {transform: scale(8);opacity: 0;}
}

<i class="ripple button">test</i>

answered Feb 20 '17 at 11:55

Gabriele Petrioli

191,379
34
261
317

hm, it does work, but my button class has a z-index: 1; (not in the example, that's my fault) and seems to be messing with this solution – Dunnow Feb 20 '17 at 12:00
@Dunnow this is impossible with this html structure. You would have to add an element inside the `.button` to contain the text and set the background etc so that the pseudo element can go behind it. Since the button creates a stacking order (*by being positioned and having a z-index no child of it can go behind it, and pseudo-elements are child elements*) – Gabriele Petrioli Feb 20 '17 at 12:04
Okay, I'll try to eliminate the z-index: 1 from my code to then apply the -1 to the ripple itself. Thanks. – Dunnow Feb 20 '17 at 12:05

score 0 · Answer 2 · answered Feb 20 '17 at 11:57

Update the Z-Index.

.button {
 width: 50px;
 height: 50px;
 background: lightblue;
 position: absolute;
 top: 50px;
 left: 50px;
}
i.ripple:before {
 content: "";
 position: absolute;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 background: darkorange;
 animation: ripple 2s ease-in infinite;
  z-index: -1;
}
@keyframes ripple {
 0% {transform: scale(1);opacity: .5;}
 100% {transform: scale(8);opacity: 0;}
}

<i class="ripple button">test</i>

.button {
 width: 50px;
 height: 50px;
 background: lightblue;
 position: absolute;
 top: 50px;
 left: 50px;
}
i.ripple:before {
 content: "";
 position: absolute;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 background: darkorange;
 animation: ripple 2s ease-in infinite;
}
@keyframes ripple {
 0% {transform: scale(1);opacity: .5;}
 100% {transform: scale(8);opacity: 0;}
}

<i class="ripple button">test</i>

pseudo-element stacking for animations

2 Answers2