Better underlines, especially on Retina

example.html

<p>
	Lorem ipsum consectetur <a href="#">simple basic link paqejigu</a> adipisicing 
	elit aut <a class="enhanced" href="#">simple enhanced link paqejigu</a> aut officia 
	adipisci nemo perferendis eveniet delectus ipsam consectetur. Molestiae, iste 
	ipsa sit aliquid quasi quidem ab? Enim veritatis architecto commodi!
</p>

<p>
	Lorem ipsum consectetur <b><a href="#">bold basic link paqejigu</a></b> adipisicing 
	elit aut <b><a class="enhanced" href="#">bold enhanced link paqejigu</a></b> officia 
	adipisci nemo perferendis eveniet delectus ipsam consectetur. Molestiae, iste 
	ipsa sit aliquid quasi quidem ab? Enim veritatis architecto commodi!
</p>

example.styl

text_color = #333
link_text_color = text_color
link_hover_color = crimson
background_color = #fafafa


body
	color text_color
	background background_color

	font-family "Open Sans", sans-serif
	-webkit-font-smoothing subpixel-antialiased
	-moz-osx-font-smoothing grayscale
	text-rendering optimizeLegibility


a.enhanced
	retina_underlines link_text_color link_hover_color background_color

underlines.styl

retina_underlines( regular = #333, active = #55abad, background = #FFF )
	position relative
	color regular
	transition color 200ms ease
	text-decoration none
	text-shadow -1px -1px 0 background, 1px -1px 0 background, -1px 1px 0 background, 1px 1px 0 background
	background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, regular 2px, regular 3px, rgba(0, 0, 0, 0) 3px)

	@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
		background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, regular 2px, regular 2.5px, rgba(0, 0, 0, 0) 2.5px);


	&:hover, &:focus
		color active
		background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, active 2px, active 3px, rgba(0, 0, 0, 0) 3px)

		@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
			background-image linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, active 2px, active 2.5px, rgba(0, 0, 0, 0) 2.5px)