Using Z-index To Set The Order Of Pseudo Elements Not Working As Intended

Question

HTML:

<figure class="blogspot-post-article-featured-image" style="background-image: url(https://img.youtube.com/vi/2DjJSkjQLBc/maxresdefault.jpg)"></figure>

CSS:

.blogspot-post-article-featured-image {
  display: block;
  position: relative;
  z-index: 4;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 28.125% 0;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.blogspot-post-article-featured-image::before {
  content: "\2689";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 72px;
  background-color: rgba(255, 255, 255, 0.5);
}

.blogspot-post-article-featured-image::after {
  content: "";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 28.125% 0;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.blogspot-post-article-featured-image::after {
  background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhSr-Ffajzy0e1y4n7qIuGXY4XfG0NiaB_MSU92v32Y2zXoRqhfRTgg4OU2F9GlPTQhj1XBci6bvH7lkRjrqAb_AD632PW4QSialx4GJ9zyN50dw6kG-2yowqXW48_5AR-SspRBAeLVos-Pl4u6G90P4DX2f2WttJ6AkRif5a5WizoJyJDYT6dWL4fr=w320-h180);
}

As you can see, I have set the position and z-index of all three layers, but the pseudo elements appear on top when it shouldn't. According to this stackoverflow post, it should be working.

.blogspot-post-article-featured-image {
  display: block;
  position: relative;
  z-index: 4;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 28.125% 0;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.blogspot-post-article-featured-image::before {
  content: "\2689";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 72px;
  background-color: rgba(255, 255, 255, 0.5);
}

.blogspot-post-article-featured-image::after {
  content: "";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 28.125% 0;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.blogspot-post-article-featured-image::after {
  background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhSr-Ffajzy0e1y4n7qIuGXY4XfG0NiaB_MSU92v32Y2zXoRqhfRTgg4OU2F9GlPTQhj1XBci6bvH7lkRjrqAb_AD632PW4QSialx4GJ9zyN50dw6kG-2yowqXW48_5AR-SspRBAeLVos-Pl4u6G90P4DX2f2WttJ6AkRif5a5WizoJyJDYT6dWL4fr=w320-h180);
}

<figure class="blogspot-post-article-featured-image" style="background-image: url(https://img.youtube.com/vi/2DjJSkjQLBc/maxresdefault.jpg)"></figure>

Using Z-index To Set The Order Of Pseudo Elements Not Working As Intended

0 Answers0