<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">

<p><a href="http://tiagoalexandrelopes.com/" target="_blank">My website</a></p>

<p class="note">This is cool because you don't need to change the color of the link on :hover. The mix-blend-mode in the ::after will invert it for you.</p>

body{
  background: black;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em
}

p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

a{
  display: block;
  color: white;
  text-decoration: none;
  position: relative;
}

a::after{
  content: "";
  background: white;
	mix-blend-mode: exclusion;
  width: calc(100% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -10px;
	transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

a:hover::after{
	height: calc(100% + 8px)
}

/* The End */

.note{
  top: auto;
  bottom: 0;
  color: #ddd;
  font-size: 13px;
  text-transform: none;
  font-weight: 300;
  text-align: center;
  padding: 10px;
  width: 100%;
  max-width: 500px;
}