Pure CSS link with rainbow underline hover effect. Made with liner-gradient() function for ::after pseudo element background.

Photo by Adrien Olichon on Unsplash.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari.

Pure CSS link with rainbow underline hover effect. Made with liner-gradient() function for ::after pseudo element background.

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

body {
  margin: 0;
  padding: 0;
  display: flex;
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;
  background: url(https://freefrontend.com/assets/img/css-snippets-demo/001.jpg) no-repeat center center fixed;
  background-size: cover;
}

p {
  max-width: 1200px;
  margin: auto 15%;
  line-height: 1.1;
  font-size: 78px;
  font-weight: 700;
  letter-spacing: .0125em;
  color: #fff;
}

a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
  z-index: 1;
}

a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .07em;
  height: .1em;
  width: 100%;
  background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
  z-index: -1;
  transition: height .25s cubic-bezier(.6,0,.4,1);
}

a:hover::after {
  height: .2em;
}

@media (max-width: 1199px) {
  p {
    font-size: 58px;
  }
}

@media (max-width: 991px) {
  p {
    font-size: 44px;
  }
}

@media (max-width: 767px) {
  p {
    font-size: 34px;
  }
}

@media (max-width: 575px) {
  p {
    font-size: 26px;
  }
}