Задан текст с помощью :after. Как можно убрать его на фон элемента которому он был задан?

Question

Как переместить серый текст SERVICES за текст Awesome Services?

.services h2 {
  font-size: 50px;
  color: #DA0000;
  position: relative;
  padding: 145px 0 110px 0;
}

.services h2:after {
  content: "Services";
  font-size: 150px;
  color: #F8F8F8;
  position: absolute;
  left: 0;
  top: 83px;
  text-transform: uppercase;
}

<div class="container services">
  <h2>Awesome Services</h2>    
</div>

Answer 1

Задайте отрицательный z-index для псевдоэлемента :after

.services h2 {
  font-size: 50px;
  color: #DA0000;
  position: relative;
  padding: 145px 0 110px 0;
}

.services h2:after {
  content: "Services";
  font-size: 150px;
  color: #F8F8F8;
  position: absolute;
  left: 0;
  top: 83px;
  text-transform: uppercase;
  z-index: -1;
}

<div class="container services">
  <h2>Awesome Services</h2>
</div>

БЛОГ НА HUSL

Задан текст с помощью :after. Как можно убрать его на фон элемента которому он был задан?

Ответы (1 шт):