Sass Mixin for Optimal Text Underlining 🤓

scss-text-underline-mixin-for-beautiful-underlined-text.md

This Gist contains a SCSS Mixin for Optimal Text Underlining

This SCSS Mixin changes the text underline color or its location relative to the text it underlines.

A Pen by Jeff Wainwright on CodePen.

License.

text-underline-mixin.scss

$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);
}