Cross-browser underline with breaks for descenders.

underline-links.scss

@mixin link(
  $text-color      : black,
  $text-color-hover: green,
  $line-color      : blue,
  $line-color-hover: red,
  $background-color: white
) {
  color: $text-color;

  span {
    color: currentColor;
    text-decoration: underline;
  }

  &:hover {
    color: $text-color-hover;
  }

  @supports (text-decoration-skip: ink) {
    span {
      text-decoration-skip: ink;
      text-decoration-skip-ink: auto;
      text-decoration-color: $line-color;
    }

    &:hover {
      span {
        text-decoration-color: $line-color-hover;
      }
    }
  }

  @supports not (text-decoration-skip: ink) {
    span {
      text-decoration: none;
      position: relative;
      text-shadow: 3px 0 0 $background-color, -3px 0 0 $background-color, 0 2px $background-color;
      z-index: 0;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 100%;
        height: 1px;
        z-index: -1;
        background-color: $line-color;
      }
    }
  }
}