Skip to content

Instantly share code, notes, and snippets.

@jamesmusgrave
Last active September 24, 2019 17:57
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jamesmusgrave/d23b9d2f42ffdddd40c5 to your computer and use it in GitHub Desktop.
Save jamesmusgrave/d23b9d2f42ffdddd40c5 to your computer and use it in GitHub Desktop.
Smart Underline Sass Mixin
@mixin smart-underline($background: #fff, $text: #000, $selection: #ffc, $position: 86%){
a {
color: inherit;
text-decoration: none;
background: -webkit-linear-gradient($background, $background), -webkit-linear-gradient($background, $background), -webkit-linear-gradient($text, $text);
background-size: .05em 1px, .05em 1px, 1px 1px;
background-repeat: no-repeat, no-repeat, repeat-x;
text-shadow: 0.03em 0 $background, -0.03em 0 $background, 0 0.03em $background, 0 -0.03em $background, 0.06em 0 $background, -0.06em 0 $background, 0.09em 0 $background, -0.09em 0 $background, 0.12em 0 $background, -0.12em 0 $background, 0.15em 0 $background, -0.15em 0 $background;
background-position-y: $position,$position, $position;
background-position-x: 0%, 100%, 0%;
&::selection {
text-shadow: 0.03em 0 $selection, -0.03em 0 $selection, 0 0.03em $selection, 0 -0.03em $selection, 0.06em 0 $selection, -0.06em 0 $selection, 0.09em 0 $selection, -0.09em 0 $selection, 0.12em 0 $selection, -0.12em 0 $selection, 0.15em 0 $selection, -0.15em 0 $selection;
background: $selection;
}
&::-moz-selection {
text-shadow: 0.03em 0 $selection, -0.03em 0 $selection, 0 0.03em $selection, 0 -0.03em $selection, 0.06em 0 $selection, -0.06em 0 $selection, 0.09em 0 $selection, -0.09em 0 $selection, 0.12em 0 $selection, -0.12em 0 $selection, 0.15em 0 $selection, -0.15em 0 $selection;
background: $selection;
}
&:before, &:after, *, *:before, *:after {
text-shadow: none;
}
&:visited{
color: inherit;
}
}
}
@mydudechris
Copy link

This is awesome, how would I go about using it while excluding link elements? For example, I use a.button where I wouldn't want the underline to be applied.

@mydudechris
Copy link

Ah, I c, I can just remove the text-shadow from my button elements.

@pixeline
Copy link

Why limit the mixin to the a selector inside?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment