freaCMS/rsc/sass/_extras.scss

/////////////////////////////////////////////////////////////////////
// Link design 
// Copied 2019-01-30 from https://codepen.io/jimmynotjim/pen/EabQjV
// and edited to suit by dSP
@mixin text-underline-crop($background) {
    text-shadow:  .03em 0 $background, 
                  -.03em 0 $background,
                  0 .03em $background,
                  0 -.03em $background,
                  .06em 0 $background,
                  -.06em 0 $background,
                  .09em 0 $background,
                  -.09em 0 $background,
                  .12em 0 $background,
                  -.12em 0 $background,
                  .15em 0 $background,
                  -.15em 0 $background;
}

@mixin text-background($color-bg, $color-text) {
    position: relative;
    z-index:0;
    &::after {
        content: "";
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
        opacity:1;
        transition: opacity 1s ease;
        background-image: linear-gradient($color-text, $color-text);
        background-size: 1px 0.5px;
        background-repeat: repeat-x;
        background-position:  0% 95%;
        
    }
    &:hover {
        &::after {
            opacity: 0;
        }
    }
}

@mixin text-selection($selection) {
    &::selection {
        @include text-underline-crop($selection);
        background: $selection;
    }

    &::-moz-selection {
        @include text-underline-crop($selection);
        background: $selection;
    }
}

@mixin link-underline($background, $text, $selection){
    @include text-underline-crop($background);
    @include text-background($background, $text);
    @include text-selection($selection);

    color: $text;
    text-decoration: none;

    *,
    *:after,
    &:after,
    *:before,
    &:before {
        text-shadow: none;
    }
    &:visited {
        color: $text;
    }

}