<!--
This Pen is inspired by the books of

Lea Verou: http://shop.oreilly.com/product/0636920031123.do 
and
Heydon Pickering: https://shop.smashingmagazine.com/products/inclusive-design-patterns

Thanks to them!
-->


<p>“If you're walking down the right path and you're willing to <a class="is-active" href="https://medium.freecodecamp.org/">keep walking</a>, eventually you'll make progress.” 
― <a href="https://barackobama.com/">Barack Obama</a></p>

/*  */
//Vars
$bg_color: black;
$font_color: white;
$padding_link: .5em;  
$udl_space: 1em; // add space in small amounts like .1

//shade color
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

body {
	font: 420% Baskerville, serif;
  background-color: $bg_color;
  color: $font_color;
}

//interesting stuff comes here:

a { 
  //Link with padding
  text-decoration: none;
  color: shade($font_color, 50%);
  padding: $padding_link 0;  
  
  
  &:hover, 
  &.is-active {
    //hover Underlines
    background: linear-gradient(orange, red) no-repeat;
    background-size: 100% .1em;
    background-position: 0 calc(#{$padding_link} + #{$udl_space} ); 
    text-shadow: .05em 0 $bg_color, -.05 $bg_color;   
  }
  
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.