Animated Background Stripes Effect 12 exercises

Move Text to the Front without Wrapping it in a Span

I wanted to make a quick amendment to what we just talked about in the previous lesson.

In the previous lesson, I said that if the text wasn't wrapped in a span, the world would explode and it would go back behind the bars.

Instead we can use negative z-index and the isolate property.

Loading explainer


0:00 Hey. Simon from the future here. I just want to make a quick amendment to something we've just talked about. First of all, shout out to Timmy right here. A few days ago, I've asked on Twitter if there was a way to have the text in front of the stripes without having to wrap the text node in a span.

0:16 Timmy just now, after I finished recording the course, of course, talked about using negative z-index and then the isolate property. We use the isolate property in what I've just showed you, but we use it on the child element to make it go back on top. After seeing this tweet, I've just tried to update the code we've just built in the previous lesson. Sure enough, it works.

0:36 This is where we ended at. We have this isolation isolate property on all the children elements of the stripes container. In the previous lesson, I said that if the text wasn't wrapped in a span like this, the world would explode, and it would go back to behind the bars in prison.

0:55 Check this out. I'm going to copy the isolation isolate property in my clipboard and delete this selector here. Instead, we're going to add the isolation isolate property to the stripes class itself. Now, if I go in the before pseudo-element, I can add a negative z-index. Let's go with -1.

1:15 Ta-da. Look at this. The text is back in front. The isolation isolate property makes sure that the stripes here do not go behind the actual background of the stripes element. If I was to remove the isolation isolate property, you can see the stripes are now behind the background as well.

1:36 I think not needing to have to tell the user, "Hey, you should wrap a text node in the span just in case," is a really nice addition. Like I said, the next videos will go back to the old technique, but that's not affecting any of what we're doing next. Let's keep it going.