سؤال css

بإمكانك عمل مثل هذا الشكل باستخدام تقنية الـ Hero Image

بإضافة ابن للعنصر الاساسي واعطائه الخصائص : 

.son{
    position: absolute;
    right: 50%;
    top: 50%;
	transform: translate(50%, -50%);
}

وتعديل ال position للأب ليصبح relative

.father{
  position: relative;
}

فيصبح الحل لمشكلتك يشبه التلي 

1. إذا لم ترد تعدي ملف ال html واستخدمت  الـ after

.big_scroll {
  position: relative;
  font-size: 120px;
  color: #121420;
  text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0),
    0 -1px rgb(0, 0, 0);
}
.big_scroll::after {
    content: "Scroll Now";
    display: block;
    position: absolute;
    right: 50%;
    top: 50%;
    font-size: large;
    color: white;
    transform: translate(50%, -50%);
}

2. أو بطريقة اخرى

 <section class="container_scroll">
      <h1 class="big_scroll">
        Scroll Now <span id="middle_text">Scroll Now</span>
      </h1>
      <h1 class="scroll"></h1>
    </section>

.big_scroll {
  position: relative;
  font-size: 120px;
  color: #121420;
  text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0),
    0 -1px rgb(0, 0, 0);
}
.middle_text {
  position: absolute;
  right: 50%;
  top: 50%;
  font-size: large;
  color: white;
  transform: translate(50%, -50%);
}