<p>Scroll down. </p>
<h1 aria-label="Rainbows are cool at any time.">
  <span>Rainbows are cool</span>
  <br>
  <span>at any time.</span>
</h1>
<p>Cool.</p>

h1 {
  --offset: 400px;
  span {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/spectrum.svg);
    background-repeat: repeat-x;
    background-size: 100vw 0.2em;
    background-position: left bottom 5px;
    background-position-x: var(--scrollPos);
    &:nth-of-type(2) {
      background-position-x: calc(var(--offset) + var(--scrollPos));
    }
  }
}

p {
  margin-bottom: 8rem;
}
body {
  font: 900 40px system-ui, -apple-system, sans-serif;
  letter-spacing: -1px;
  margin: 1rem;
  min-height: 200vh;
}

window.addEventListener("scroll", e => {
  // Dealing with Safari difference.
  // look into scrollingElement https://caniuse.com/#feat=document-scrollingelement
  let scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; 
  let newPos = scrollTop + "px";
  document.documentElement.style.setProperty('--scrollPos', newPos);
});