Links with custom bottom border

Using padding on the inline element, without setting display: inline-block.

HTML

asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
<a href="#">Default link</a>
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
<a href="#" class="underline">Long link with custom bottom border, without using <code>display: inline-block;</code></a>
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd
asd asdasdasd asd asd asdasdasdasd asd

CSS

body {
    line-height: 1.5;
}

a {
    padding: .5em 0;
}
a.underline {
    text-decoration: none;
    border-bottom: 1px dotted red;
}