Skip to content

Instantly share code, notes, and snippets.

@jimmynotjim
Last active October 6, 2020 15:44
Show Gist options
  • Save jimmynotjim/16290a7ed59b6f3bb28d to your computer and use it in GitHub Desktop.
Save jimmynotjim/16290a7ed59b6f3bb28d to your computer and use it in GitHub Desktop.
Sassy Link Underlines
@import "underline";
$color-text: #333332;
$color-background: #fff;
$color-selection: #b4d5fe;
.post a {
@include link-underline($color-background, $color-text, $color-selection);
}
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment