This SCSS Mixin changes the text underline color or its location relative to the text it underlines.
A Pen by Jeff Wainwright on CodePen.
This SCSS Mixin changes the text underline color or its location relative to the text it underlines.
A Pen by Jeff Wainwright on CodePen.
$color-theme-default: red; | |
// link underlines | |
@mixin text-underline( | |
$background: white, | |
$underline: $color-theme-default, | |
$position: 85%, | |
$fontsize: 1rem | |
) { | |
// $width = 1/10 the fontsize | |
$width: $fontsize * .1; | |
color: inherit; | |
text-decoration: none; | |
background: | |
linear-gradient($background, $background), | |
linear-gradient($background, $background), | |
linear-gradient($underline, $underline); | |
// this sets up the size of the bottom border | |
background-size: #{$width / 2} $width; | |
background-repeat: no-repeat, no-repeat, repeat-x; | |
// this create all of the text shadows needed to create a stroke around the text | |
text-shadow: | |
$width $width $background, | |
$width 0 $background, | |
0 $width $background, | |
-#{$width} -#{$width} $background, | |
-#{$width} 0 $background, | |
0 -#{$width} $background; | |
// this sets up the location of the bottom border | |
background-position: 0 $position, 100% $position; | |
} | |
body { | |
margin: 0; | |
padding: 2rem; | |
} | |
span { | |
font-size: 2rem; | |
@include text-underline(white, red, 100%, 2rem); | |
} |