Instantly share code, notes, and snippets.

What would you like to do?
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 <>
/// @link
/// @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;
&: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