A Pen by Brent Jackson.

Background-gradient-link-underlines.markdown

Background gradient link underlines

A variation on this wonderful article from Marcin Wichary at Medium: https://medium.com/p/7c03a9274f9

A Pen by Brent Jackson on CodePen.

License.

index.html

<h1>Background gradient <a href="#">link underlines</a></h1>
<h1><a href="#">jerky queen guys</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">Magnam saepe</a> dolor qui vitae soluta excepturi fuga totam iure? Impedit quod quam eos hic voluptatem quae quia molestiae earum libero harum. <a href="#">jerky</a></p>
<p>Inspired by Marcin Wichary from Medium:
  <a href="https://medium.com/p/7c03a9274f9">Crafting link underlines on Medium</a>
</p>

style.scss

@import "compass";
// A variation on this approach:
// https://medium.com/p/7c03a9274f9

$text: #333;
$blue: #0077aa;
$purple: #550088;
body {
  font-family: Merriweather, serif;
  line-height: 1.5;
  padding: 2rem;
  color: $text;
}
h1 {
  font-size: 3rem;
  line-height: 4rem;
  a {
    background-position: 0 3.25rem;
    background-size: 4px 4px;
  }
}
p {
  font-size: 1.25rem;
  a {
    background-position: 0 1.375rem;
    background-size: 1px 1px;
  }
}

a {
  text-decoration: none;
  color: $text;
  background-image: linear-gradient(#fff 50%, $text 50%);
  background-repeat: repeat-x;
  &:hover {
    color: $blue;
    background-image: linear-gradient(#fff 50%, $blue 50%);
  }
  &:visited {
    color: $purple;
    background-image: linear-gradient(#fff 50%, $purple 50%);
  }
}