Background-image style link underline (Sass mixin with defaults)

underline.scss

// Sassified version of the approach discussed here...
// big up: https://eager.io/blog/smarter-link-underlines/

@mixin underline($fg: #000, $bg: #fff, $size: 1px, $ink: 0.03em, $pos: 87%) {
  background: linear-gradient($bg, $bg), linear-gradient($bg, $bg),
    linear-gradient($fg, $fg);
  background-size: 0.05em $size, 0.05em $size, $size $size;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: $ink 0 $bg, -$ink 0 $bg, ($ink * 2) 0 $bg, -($ink * 2) 0 $bg,
    ($ink * 3) 0 $bg, -($ink * 3) 0 $bg, ($ink * 4) 0 $bg, -($ink * 4) 0 $bg,
    ($ink * 5) 0 $bg, -($ink * 5) 0 $bg;
  background-position: 0 $pos, 100% $pos, 0 $pos;
}

🔜 An animatable alternative using text-decoration-thickness & text-underline-offset

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset