<div class="line-wrap">
    <p class="line-1">"Tell me and I forget. Teach me and I remember. <a class="link-line" href="#">Involve me and I learn.</a>" <br> -- Benjamin Franklin</p>
  </div><!-- line-wrap -->

.line-wrap {
  /* Variables */
  --bgc: #0379bd;
  --wht: hsl(0, 0%, 100%);
  --underline-height: 6px;
  --underline-block-width: 20px;
  --underline-color: #fec333;
  --underline-color-hover: #fec333;
  --underline-transition: .5s;
  display: grid;
  place-items: center;
  background-color: var(--bgc);
  height: 30vh;
}

.line-1 {
	text-align: center;
  	font-size: 1.5rem;
  	font-weight: bold;
  	line-height: 2;
  	padding: 10px;
  	border: 1px solid black;
  	background-color: white;
  	width: 70%;
}

.link-line {
  color: black;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--bgc), var(--bgc)),
    linear-gradient(90deg, var(--underline-color), var(--underline-color));
  background-size: var(--underline-block-width) var(--underline-height),
    100% var(--underline-height);
  background-repeat: no-repeat;
  background-position-x: calc(var(--underline-block-width) * -1), 0;
  background-position-y: 100%;
  transition: background-position-x var(--underline-transition);
}

.link-line:hover {
  background-image: linear-gradient(90deg, var(--bgc), var(--bgc)),
    linear-gradient(
      90deg,
      var(--underline-color-hover),
      var(--underline-color-hover)
    );
  background-position-x: calc(100% + var(--underline-block-width)), 0;
}