Sass mixin for link border-bottom 'underlining' that animates in on hover, in sync with colour changes, and doesn't alter element height

_cj-hover-border.scss

/// Animate in a border-bottom on hover or focus.
///
/// @author chris barnes <chris@cjbarnes.co.uk>
/// @link http://www.cjbarnes.co.uk/blog/animating-link-borders-css-2016-07-10/
///
/// @param {String} $hover-color The color the link should change to on hover.
/// @param {Number} $duration    How long the animation should take.
/// @output Color, border and transition styles.
@mixin cj-hover-border($hover-color: #639, $duration: 0.25s) {
    border-bottom: 1px solid transparent;
    transition: color $duration linear, border-color $duration linear;

    &:hover,
    &:focus {
        border-bottom-color: $hover-color;
        color: $hover-color;
    }
}