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

![enter image description here](https://i.stack.imgur.com/ZXN08.png)

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?