Как выявить прогрессирующую границу на прокрутке окна

Question

В этом коде граница заголовка «распространяется» при наведении, и я хочу создать такой же эффект для прокрутки. Как я могу это сделать?

.title {
  position: relative;
  font-size: 40px;
  font-weight: bolder;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  color: #262626;
}

.title::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, #ED1C24, rgb(230, 7, 74));
}

.section-box:hover .title::before {
  left: 0;
  right: 0;
  height: 2px;
  transition: 1s;
  background: #ED1C24;
}

<section class="section-box" id="about">
  <div class="container">
    <div class="section-head">
      <h1 class="title">about us</h1>
    </div>
  </div>
</section>

Answer 1

Я не знаю, что вы подразумеваете под "прокруткой", но нужная анимация применяется классом CSS psuedo :hover. Для прокрутки не существует псевдо-класса, поэтому вам, вероятно, потребуется задействовать Javascript.

Список доступных CSS псевдо-классов можно найти здесь. Попробуйте поэкспериментировать с ними, чтобы увидеть, будут ли они делать то, что вы хотите.

Событие прокрутки Javascript можно найти здесь.