Animations de liens en CSS

Quelques tests d'animation de liens grâce au pseudo-élément :after et aux transitions CSS.

Pour commencer, voici notre structure HTML :

<div class="bloc">
    <a href="#" class="top">Top</a>
    <a href="#" class="right">Right</a>
    <a href="#">Bottom</a>
    <a href="#" class="left">Left</a>
</div>

Et notre CSS :

.bloc {
  font: 16px/1.5 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
}
.bloc a {
  position: relative;
  display: block;
  background: #f0f0f0;
  padding: 10px 0;
  margin: 20px 0;
  text-align: center;
  color: #444;
  text-decoration: none;
  overflow: hidden;
}
.bloc a:after {
  content: "";
  width: 100%;
  height: 5px;
  background: violet;
  position: absolute;
  bottom: 0;
  left: -100%;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.bloc a:hover:after,
.bloc a:active:after {
  left: 0;
}
.bloc a.top:after {
  top: 0;
}
.bloc a.left:after {
  width: 5px;
  height: 100%;
  top: -100%;
  left: 0;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.bloc a.left:hover:after,
.bloc a.left:active:after {
  top: 0;
}
.bloc a.right:after {
  width: 5px;
  height: 100%;
  top: -100%;
  right: 0;
  left: auto;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.bloc a.right:hover:after,
.bloc a.right:active:after {
  top: 0;
}

Et voici le résultat :

See the Pen Link animations by lddz (@ledodz) on CodePen.