Wired-Style Underline

Wired announced their new website design today, and the underline style of ‘a tag’ was intriguing enough to catch my eyes. Basically it looks like the text is underlined with a sky-blue marker. However, when you examine this closely, you’ll notice that its vertical position hasn’t been just randomly placed.

wired_1 wired_2

This chubby underline starts slightly above the baseline. Thus, it looks like the bottom of the text is dipping in water a little bit. This gives me an impression that the text is highlighted by a marker, instead of the feeling that the text is on a coloured block. It ends below the descender line with a recognisable bottom padding.

The bottom end of the underline style is placed to balance with the top line in a hover style. Presumably they tested the bottom-top type of animations for this transition, but as they decided, I also think the classic fade-in transition is fitting for the default hover state.

wired_0wired_0_1wired_0_2

Despite the excellence of this underline design, the technical side of implementing this isn’t really difficult.

.link-underline a {
    border-bottom: 3px solid #b4e7f8;
    box-shadow: inset 0 -5px 0 #b4e7f8;
    color: inherit;
    transition: background .15s cubic-bezier(.33,.66,.66,1);
}

.link-underline a:hover {
    background: #b4e7f8;
}
CSS style for ‘a tag’ from Wired website

border-bottom alone can’t cover the descender line, so they used the border-bottom and the same color of box-shadow together.

wired_detail_02
wired_detail_01
wired_0_3
wired_0_4

See the Pen OyWByL by Hyungtak Jun (@hjun) on CodePen.

I guess the only issue that I can think of is that this underline is a lot broader than the usual 1 pixel underline, so it could emphasise the link much more than it should be.