LESS mixin for nicer, more controllable text underlines

fancy-underline.less

// Fancy Underline
// Creates a nice underline for links using CSS linear gradient
// with control on width, color and distance from baseline
// Inspired by Medium's technique ca. 2015
.fancy-underline ( @color: rgba(0, 0, 0, 0.5), @start: 0.05em, @end: 0.15em ) {
	text-decoration: underline;
	// Use Modernizr
	// http://modernizr.com/download/#-cssgradients-printshiv-cssclasses-prefixes-cssclassprefix:has!
	.has-cssgradients & {
		text-decoration: none;
		background-image: linear-gradient(to top, transparent, transparent @start, @color @start, @color @end, transparent @end );
	}
}