Pure CSS implementation of Wired.com's hyperlink style

Question

Wired's mobile view (set your user-agent to iOS Safari to see it on desktop) features an elegant twist to the standard underlined hyperlink style:

I assumed this was achieved purely by CSS without external graphics, but no:

background-image: url(http://cdn.mobify.com/sites/wired/production/i/link-bg.png);
background-size: 5px 24px;

I'm well aware of using the border property to create custom weighted underlines but am unable to create the line undercut as a margin-bottom offset cuts off when reaching the baseline of the text.

Can this style be achieved using only CSS?

Answer 1

You can apply an inset box-shadow property:

a {
    text-decoration: none;
    color: #000;
    box-shadow: inset 0 -4px 0 #c0e6f7;
}

jsFiddle demo

The first value is inset, which makes the box-shadow go inward, opposed to outwards (for the lack of a better way to put it) and the second value 0 is the x-value (the box shadow from side to side). The next -4px is the y-value (from top to bottom). The third is 0 so that there is no "blur" effect on the shadow (thus giving you a solid border effect) and then the color value comes next. :)

Answer 2

You can do this with a linear gradient and background size.

Demo

a {
  text-decoration: none;
  color: inherit;
  background: linear-gradient(to bottom, rgb(227,244,251), rgb(175,221,243)) bottom repeat-x;
  background-size: 25%;
}

Answer 3

I like @JaceCotton's answer but it is lacking some small details that WIRED has in their image version. Details such as a slightly darker blue line along the bottom on the underline and a soft top to the underline.

These details may not be important or that noticeable but I think the tiny details really help along the marker underline effect of the original WIRED version.

Just add this css to any a tag to see the effect (demo):

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(198,232,248,0) 75%, rgba(192,230,247,1) 83%, rgba(192,230,247,1) 94%, rgba(184,226,245,1) 95%, rgba(184,226,245,1) 97%, rgba(184,226,245,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(75%,rgba(198,232,248,0)), color-stop(83%,rgba(192,230,247,1)), color-stop(94%,rgba(192,230,247,1)), color-stop(95%,rgba(184,226,245,1)), color-stop(97%,rgba(184,226,245,1)), color-stop(100%,rgba(184,226,245,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00b8e2f5',GradientType=0 ); /* IE6-9 */