Follow link

by Bouteille Dimitri

HTML

<a href="">Contactez-nous</a>

SCSS

@import url('https://fonts.googleapis.com/css?family=Raleway:400,800,900');

* {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

a {
  position:relative;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  color: #222;
  padding-bottom: 6px;
  margin: 100px;
  display: inline-block;
  &:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 75%;
    height: 3px;
    background: #222;
    transition: all 0.3s ease;
  }
  &:hover {
    &:after {
      transition: right 0.2s ease, left  0.3s ease-out 0.3s;
      right: 0;
      left: 75%;
    }
  }
 
}