1

I try to learn how to use pseudo elements in CSS and I am facing a problem. I try to create a container that contains some text and a pseudo element.

But I wan't the pseudo element to be behind the elements text but before the background color. I don't know how to achieve this. I want the pseudo element to be part of and before the background color. But to be behind the containers actual content.

Here is a short snippet of the exact problem I am facing:

.container {
  height: 10rem;
  background-color: blue;
  color: white;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  background-color: red;
}
<div class="container">
  <h1>This is a title</h1>
</div>
Stephen
  • 913
  • 3
  • 24
  • 50
  • Is it acceptable if `::before` element goes behind blue `.container` and not just text? – Omkar76 Mar 24 '21 at 16:36
  • @Omkar76 No that is not acceptable. I want the pseudo element to be part of and before the background color. But to be behind the containers actual content. – Stephen Mar 24 '21 at 16:38
  • all you need is position:relative to h1. No need z-index – Temani Afif Mar 24 '21 at 19:18
  • @TemaniAfif Yeah, but I want to be able to reuse this class in different pages. I want it to be independent of what child elements it may or may not have. – Stephen Mar 24 '21 at 19:22
  • but you accepted an answer adding styles to child elements. I gave you a simplified solution – Temani Afif Mar 24 '21 at 19:23
  • if you want it to be independant add `z-index:-1` to pseudo element and `position:relative;z-index:0` to container – Temani Afif Mar 24 '21 at 19:24
  • @TemaniAfif Yes because it think it is a clean solution to the problem. It doesn't need to be applied to the children and it works even tough the div doesn't have any. – Stephen Mar 24 '21 at 19:25
  • I am suggesting that you simply need to add `position:relative`. No need z-index. – Temani Afif Mar 24 '21 at 19:26
  • @TemaniAfif To your second question: Wouldn't giving the z-index -1 of the pseudo make it go behind the entire container? – Stephen Mar 24 '21 at 19:26
  • *make it go behind the entire container?* --> you need to also set z-index to container (see my previous comment) – Temani Afif Mar 24 '21 at 19:27
  • When the z-index of the entire container is bigger then the z-index of the pseudo element. Then the container and its background would be in front of the pseudo element. – Stephen Mar 24 '21 at 19:28
  • I want the background of the container element behind the pseudo element and I want the pseudo element behind the content of the container. – Stephen Mar 24 '21 at 19:29

1 Answers1

3

Just set z-index to childs of container.

.container {
  height: 10rem;
  background-color: blue;
  color: white;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  background-color: red;
}

.container>* {
  position: relative;
  z-index: 2;
}
<div class="container">
  <h1>This is a title</h1>
</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69