How does Wired magazine achieve this thick underline link effect?

css, html

Solution

If you inspect a link you'll see:

border-bottom: 1px solid #CBEEFA;
box-shadow: 0px -4px 0px #CBEEFA inset;

You can read about the reasoning of using `box-shadow` in this article.

Problem

I noticed recently that Wired magazine has a blue underline for their links that is thick, crosses over text descenders, and a different colour from the text. Here's a random page for an example. I don't think this is done with a `bottom-border`, because it overlaps the text descenders. The colour different might be done with the new `-moz-text-decoration-color` and `text-decoration-color` declarations, but I can't determine if there's anything that helps one control the line thickness. I have, of course, tried to go forensic by analyzing their CSS, but it's minimized and complicated, and I can't machette my way through all the brush to get at the information I need. I tried searching for key terms like `-moz-text-decoration-color` and `border-bottom`, but with no success. Anyone know how they do it?

Original source