<div class="container">
  <a href="http://elwin.vdhazel.com/" target="_blank">This is a link</a>
</div>
html,
body {
  height: 100%;
  width: 100%;
  background-color: #2D2D2D;
}

.container {
  height: 100%;
  display: flex;
  align-items: center;
}

a {
  display: block;
  margin: auto;
  padding: 1rem 1.25rem;
  font-family: sans-serif;
  font-size: 1.5rem;
  text-decoration: none;
  color: white;
  position: relative;
  transition: all .3s cubic-bezier(.2, 0, 0, 1);
  z-index: 1;
  
  &:after {
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    bottom: 0;
    right: 1.25rem;
    left: 1.25rem;
    background-color: #ffffff;
    transition: all .3s cubic-bezier(.2, 0, 0, 1);
    transform-origin: bottom center;
    z-index: -1;
  }
  
  &:hover {
    color: #2D2D2D;
    
    &:after {
      right: 0;
      left: 0;
      height: 100%;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.