How does Wired magazine achieve this thick underline link effect?

Question

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?

Answer 1

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.

Answer 2

In the CSS

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

Which according to W3Schools

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

Note: The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.