Types of CSS link hover

by xaliber

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<div class="type-boxshadow-1 columns is-vcentered is-centered has-text-centered">

  <div class="column is-2">
    <strong>Box Shadow</strong>
  </div>
  <div class="column is-one-quarter">
    <a href="">Home</a>
  </div>
  <div class="column is-one-quarter">
    <a href="">Documentation</a>
  </div>

</div>

<div class="type-boxshadow-2 columns is-vcentered is-centered has-text-centered">

  <div class="column is-2">
    <strong>;</strong>
  </div>
  <div class="column is-one-quarter">
    <a href="">Home</a>
  </div>
  <div class="column is-one-quarter">
    <a href="">Documentation</a>
  </div>

</div>

<div class="type-background pt1 columns is-vcentered is-centered has-text-centered">

  <div class="column is-2">
    <strong>BG</strong>
  </div>
  <div class="column is-one-quarter">
    <a href="">Home</a>
  </div>
  <div class="column is-one-quarter">
    <a href="">Documentation</a>
  </div>

</div>

<div class="type-background pt2 columns is-vcentered is-centered has-text-centered">

  <div class="column is-2">
    <strong>;</strong>
  </div>
  <div class="column is-one-quarter">
    <a href="">Home</a>
  </div>
  <div class="column is-one-quarter">
    <a href="">Documentation</a>
  </div>

</div>

<div class="type-background pt3 columns is-vcentered is-centered has-text-centered">

  <div class="column is-2">
    <strong>;</strong>
  </div>
  <div class="column is-one-quarter">
    <a href="">Home</a>
  </div>
  <div class="column is-one-quarter">
    <a href="">Documentation</a>
  </div>

</div>

<div class="type-background pt4 columns is-vcentered is-centered has-text-centered">

  <div class="column is-2">
    <strong>;</strong>
  </div>
  <div class="column is-one-quarter">
    <a href="">Home</a>
  </div>
  <div class="column is-one-quarter">
    <a href="">Documentation</a>
  </div>

</div>

<div class="type-pseudo pt1 columns is-vcentered...

SCSS

body {
  padding: 3rem;
  counter-reset: count-column;
}

.columns {
  background: #e9e9e9;
}
.column:first-child {
  font-size: 0.75rem;
  text-align: left;
}
.column:first-child:before {
  counter-increment: count-column;
  content: "#" counter(count-column) ". ";
  float: left;
  font-weight: bold;
}


a {
  display: block;
  padding: 0.5rem;
  background-color: #fff;
  
  transition: all .35s;
  
  // $thelink: &;  // Sets `a` as parent
  // thanks to https://codeburst.io/how-to-do-sass-grandparent-selectors-b8666dcaf961
  $typebg: type-background;
  $typeps: type-pseudo;
  
  /* Type-background */
  .type-background & {
    background-repeat: no-repeat;
    background-size: 200% 2px;
    background-position: 100% calc(100% - 1px);
  }
  .#{$typebg}.pt1 & {
    background-image: linear-gradient(to right, #333 50%, #4a90e2 50%);
  }
  .#{$typebg}.pt2 & {
    background-image: linear-gradient(to right, #4a90e2 50%, #fff 50%);
  }
  .#{$typebg}.pt3 & {
    background-image: linear-gradient(#4a90e2, #4a90e2), linear-gradient(#fff, #fff);
    background-size: 0 5px, auto;
    background-position: top left;
  }
  .#{$typebg}.pt4 & {
    background-image: linear-gradient(#4a90e2, #4a90e2), linear-gradient(#fff, #fff);
    background-size: 0 5px, auto;
    background-position: center bottom;
    
    box-shadow: inset 0 -3px 0 -1px #ccc;
                  /* box-shadow di atas BG */
  }
  
  /* Type-pseudo */
  .type-pseudo & {
    position: relative;
  }
  .type-pseudo &:after {
    content: "";
    bottom: 0;
    height: 1px;
    position: absolute;
  }
  .#{$typeps}.pt1 &:after {
    left: 0;
    width: 100%;
    background-color: #f90;
    transition: transform .35s ease,-webkit-transform .35s ease;                   // eas-in-out utk slower
    transform: scaleX(0);    // this is dealbreaker
  }
  .#{$typeps}.pt2 &:after,
  .#{$typeps}.pt3 &:after {
    width: 0;
    background-color: #f90;
    transition: width .35s ease;
    -webkit-transition: width .35s...