Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
}
}
@jamesmusgrave

This comment has been minimized.

Copy link
Owner Author

jamesmusgrave commented Nov 11, 2014

@mydudechris

This comment has been minimized.

Copy link

mydudechris commented Mar 25, 2015

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

This comment has been minimized.

Copy link

mydudechris commented Mar 25, 2015

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

@pixeline

This comment has been minimized.

Copy link

pixeline commented Jan 27, 2016

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