<article class="post">
<p>This is a simplified example of <a href="https://eager.io/blog/smarter-link-underlines/">Smarter Link Underlines</a> built for <a href="http://sass-lang.com/"> Sass</a> rather than <a href="https://learnboost.github.io/stylus/">Stylus</a>. Original code example by <a href="https://twitter.com/adamfschwartz">Adam Schwartz</a> of <a href="https://eager.io/">eager.io</a>.</p>
<p><a href="https://gist.github.com/jimmynotjim/16290a7ed59b6f3bb28d">View the gist on Github</a></p>
<pre>
@mixin text-underline-crop($background) {
text-shadow: .03em 0 $background,
-.03em 0 $background,
0 .03em $background,
0 -.03em $background,
.06em 0 $background,
-.06em 0 $background,
.09em 0 $background,
-.09em 0 $background,
.12em 0 $background,
-.12em 0 $background,
.15em 0 $background,
-.15em 0 $background;
}
@mixin text-background($color-bg, $color-text) {
background-image: linear-gradient($color-text, $color-text);
background-size: 1px 1px;
background-repeat: repeat-x;
background-position: 0% 95%;
}
@mixin text-selection($selection) {
&::selection {
@include text-underline-crop($selection);
background: $selection;
}
&::-moz-selection {
@include text-underline-crop($selection);
background: $selection;
}
}
@mixin link-underline($background, $text, $selection){
@include text-underline-crop($background);
@include text-background($background, $text);
@include text-selection($selection);
color: $text;
text-decoration: none;
*,
*:after,
&:after,
*:before,
&:before {
text-shadow: none;
}
&:visited {
color: $text;
}
}
</pre>
</article>
@mixin text-underline-crop($background) {
text-shadow: .03em 0 $background,
-.03em 0 $background,
0 .03em $background,
0 -.03em $background,
.06em 0 $background,
-.06em 0 $background,
.09em 0 $background,
-.09em 0 $background,
.12em 0 $background,
-.12em 0 $background,
.15em 0 $background,
-.15em 0 $background;
}
@mixin text-underline($color-bg, $color-text) {
background-image: linear-gradient($color-text, $color-text);
background-size: 1px 1px;
background-repeat: repeat-x;
background-position: 0% 95%;
}
@mixin text-selection($selection) {
&::selection {
@include text-underline-crop($selection);
background: $selection;
}
&::-moz-selection {
@include text-underline-crop($selection);
background: $selection;
}
}
@mixin link-underline($background, $text, $selection){
@include text-underline-crop($background);
@include text-underline($background, $text);
@include text-selection($selection);
color: $text;
text-decoration: none;
*,
*:after,
&:after,
*:before,
&:before {
text-shadow: none;
}
&:visited {
color: $text;
}
}
$color-text: #333332;
$color-background: #fff;
$color-selection: #b4d5fe;
body {
font-family: freight-text-pro, georgia, serif;
font-size: 18px;
line-height: 1.4;
margin: 20px;
}
pre {
background-color: #eee;
font-size: 16px;
padding: 20px;
}
.post a {
@include link-underline($color-background, $color-text, $color-selection);
}
Also see: Tab Triggers