Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jonathanhudak/9964445 to your computer and use it in GitHub Desktop.
Save jonathanhudak/9964445 to your computer and use it in GitHub Desktop.
A Pen by Brent Jackson.
<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>
@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%);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment