Create a gist now

Instantly share code, notes, and snippets.

Sass mixin for link border-bottom 'underlining' that animates in on hover, in sync with colour changes, and doesn't alter element height
/// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment