Animated Bottom Border on Hover for Text Links

animated-bottom-border.scss

.content a {

	&:link,
	&:visited,
	&:active {
		position: relative;
		color: $grey-dark;
		text-decoration: none;
		transition: color 0.2s ease-out;
	}

	&:before,
	&:after {
		position: absolute;
		display: block;
		content: '';
		width: 100%;
		height: 2px;
		left: 0;
		bottom: -2px;
		background-color: $grey-lightest;
	}

	&:after {
		background-color: $pink;
		transform: scaleX(0);
		transition: transform 0.2s ease-in-out;
	}

	&:hover:after,
	&:focus:after {
		transform: scaleX(1);
	}

}