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

h1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;

  span {
    display: inline-block;
    font-size: calc(5vw + 16px);
    line-height: .7;
    margin: .2em 0;
    border-bottom: .2em solid rgba(0, 0, 0, 0);
    background:
      linear-gradient(#fff, #fff) padding-box,
      repeating-linear-gradient(-65deg, #5461c8 12.5vw, #c724b1 0 25vw, #e4002b 0 37.5vw, #ff6900 0 50vw, #f6be00 0 62.5vw, #97d700 0 75vw, #00ab84 0 87.5vw, #00a3e0 0 100vw) border-box;
    background-size: 200vw 100vh;
    background-attachment: fixed;
    
    &:nth-of-type(2) {
      background-size: 150vw 100vh;
    }
  }
}

p {
  margin-bottom: 85vh;
}

body {
  font: 900 40px system-ui, -apple-system, sans-serif;
  letter-spacing: -1px;
  margin: 1rem;
}

/**
  * Moving Rainbow Underlines
  *
  * https://css-tricks.com/moving-rainbow-underlines/#comment-1753367 
  *
  */