.underline.outline
.underline.background

a href="http://bennettfeely.com/image-effects" Trump Inaugural Address Generator
a href="http://bennettfeely.com/image-effects" CSS Image Effects
a href="http://bennettfeely.com/scales" CSS Scales
a href="http://saintsoftheweek.com" Saints of the Week
a href="http://bennettfeely.com/clippy" Clippy
a href="http://bennettfeely.com/gradients" Gradients
a href="https://bennettfeely.com/air2048" air2048
a href="http://bennettfeely.com/cssynth" CSSynth
a href="http://bennettfeely.com/image-effects" CSS Creatures
a href="http://bennettfeely.com/flexplorer" Flexplorer
a href="http://bennettfeely.com/filters" Filters Playground

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

$duration : .5s;
$bounce : cubic-bezier(.33,1.61,0,.83);

body {
  font: 2em Cabin;
  margin: 1em;
  text-align: center;
  background: seashell;
}

a {
  position: relative;
  display: inline-block;
  padding: .25em;
  text-decoration: none;
  color: mediumblue;
  mix-blend-mode: multiply
}

.underline {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  transition: transform $duration $bounce;
  
  &.background {
    background: skyblue;
  }
}

$('a').hover(function(){
  var link = $(this)[0].getBoundingClientRect();

  var x_pos = link.width/2 + link.left;
  var y_pos = link.top + link.height/2;
  
  var translate = 'translate(' + x_pos + 'px,' + y_pos + 'px)';
  var scale = 'scale(' + link.width + ', ' + link.height + ')';
  
  console.log(translate + ' ' + scale);

  $('.underline').css({
    'transform' : translate + ' ' + scale
  }); 
});