Psuedo before after overlay show parent text

When needing a pseudo element overlay you will need before or after. Then in some cases you still want the text from the parent element below to show.

The trick is to use z-index like below. To make it work, you also need to set position: relative;.

div {
  position: relative;
  z-index: 1;
}

div:after {
  z-index: -1;
}