nicer underlines

better customizable underlines with descender clearing option.

LESS mixin:

@background-color: #fff;
@link-color: #333;
@link-color-active: #55abad;
@link-underline-color: @link-color;
@link-underline-color-active: @link-color-active;
@link-underline-width: 1px;
@link-underline-offset: 2px;
@breaking-underlines: true;

.underline(@color: @link-underline-color, @weight: @link-underline-width, @offset: @link-underline-offset){
	text-decoration: none;
	background-image: linear-gradient(to top, transparent, transparent @offset, @color @offset, @color (@offset + @weight), transparent (@offset + @weight));
	& when (@breaking-underlines){
		text-shadow: -1px -1px 0 @background-color, 1px -1px 0 @background-color, -1px 1px 0 @background-color, 1px 1px 0 @background-color;
	}
}

Usage: .underline();

Source: adapted from codepen.io/ghepting/pen/tLnHK, based on article Crafting link underlines on Medium,  Marcin Wichary.

For similar underline styles in InDesign see: InDesign : Unterlägen bei Unterstreichungen aussparen