Is there a way to put a pseudo element behind the text node?

Question

I have an element that has a ::before pseudo element as background.

But as you can see the pseudo element is covering my text.

.wrapper {
  background-color: salmon;
  padding: 20px;
}

.tag {
  position: relative;
  display: inline-block;
}

.tag::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(1.2) translateY(50%);
  background-image: radial-gradient(closest-side, steelblue 99%, transparent 100%);
}

<div class="wrapper">
  <span class="tag">Lorum ipsum</span>
</div>

I wish I can target the text node by

.tag:text {
  z-index: 1;
}

But it's not possible.

I tried to give the pseudo element z-index: -1; but it's covered by anything that has a background such as .wrapper, since all their backgrounds has default z-index of 0.

.wrapper {
  background-color: salmon;
  padding: 20px;
}

.tag {
  position: relative;
  display: inline-block;
}

.tag::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(1.2) translateY(50%);
  background-image: radial-gradient(closest-side, steelblue 99%, transparent 100%);
  z-index: -1;
}

<div class="wrapper">
  <span class="tag">Lorum ipsum</span>
</div>

What I want to achieve:

How can I achieve it without modifying the html structure?

the default value is not 0 but auto. make the pseudo element -1 and the tag 0, it will work — Temani Afif, Apr 26 '21 at 10:47

score 2 · Answer 1 · answered Apr 26 '21 at 09:46

2

Add z-index on .tag

.tag {
      position: relative;
      display: inline-block;
      z-index: 1;
    }

.wrapper {
  background-color: salmon;
  padding: 20px;
}

.tag {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.tag::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(1.2) translateY(50%);
  background-image: radial-gradient(closest-side, steelblue 99%, transparent 100%);
  z-index: -1;
}

<div class="wrapper">
  <span class="tag">Lorum ipsum</span>
</div>

answered Apr 26 '21 at 09:46

Lalji Tadhani

14,041
3
23
40

Wait, does that mean whatever `z-index` the child has, as long as their parent has a bigger `z-index`, it's allways gonna be displayed on the top? Even with a negative `z-index`? – Hao Wu Apr 26 '21 at 09:55
1

@HaoWu not bigger, as long as the parent has any value of z-index (other than auto). Read the duplicate for more detail – Temani Afif Apr 26 '21 at 10:51

score 0 · Answer 2 · answered Apr 26 '21 at 09:54

0

Positive z-index on .tag and negative on .tag::before

.wrapper {
  background-color: salmon;
  padding: 20px;
}

.tag {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.tag::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(1.2) translateY(50%);
  background-image: radial-gradient(closest-side, steelblue 99%, transparent 100%);
  z-index: -1;
}

<div class="wrapper">
  <span class="tag">Lorum ipsum</span>
</div>

answered Apr 26 '21 at 09:54

Igal

5,833
20
74
132

isn't this exactly copy of https://stackoverflow.com/a/67264333/10698741 ? – doğukan Apr 26 '21 at 10:11
@doğukan Yeah, appears so. I didn't see his code snippet as I was testing mine in JSFiddle. Anyway, your solution is quite interesting, I didn't think of the negative `translateZ`. Congrats on the pick, well deserved! – Igal Apr 26 '21 at 10:55

Is there a way to put a pseudo element behind the text node?

2 Answers2