0

Как переместить серый текст 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> 

1

1 ответ 1

5

Задайте отрицательный 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>

2
  • Благодарю за помощь! Забыл о существовании z-index...
    – Holvender
    Commented 27 июл. 2021 в 8:41
  • 1
    @Holvender отметить решением не забываем Commented 27 июл. 2021 в 8:45

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.