How to reveal progressing border on window scroll

.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>