How to increase the gap between text and underlining in CSS

Using CSS, when text has text-decoration:underline applied, is it possible to increase the distance between the text and the underline?

No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

If you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid.

For multiline, you can wrap you multiline texts in a span inside the element. E.g. <a href="#"><span>insert multiline texts here</span></a> then just add border-bottom and padding on the <span> - Demo

Update 2021: text-underline-offset now works in almost all major and newest versions of browsers (IE11 is a no-go): https://caniuse.com/?search=text-underline-offset

Update 2019: The CSS Working Group has published a draft for text decoration level 4 which would add a new property text-underline-offset (as well as text-decoration-thickness) to allow control over the exact placement of an underline. As of this writing, it's an early-stage draft and has not been implemented by any browser, but it looks like it will eventually make the technique below obsolete.

Original answer below.

The problem with using border-bottom directly is that even with padding-bottom: 0, the underline tends to be too far away from the text to look good. So we still don't have complete control.

One solution that gives you pixel accuracy is to use the :after pseudo element:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

By changing the bottom property (negative numbers are fine) you can position the underline exactly where you want it.

One problem with this technique to beware is that it behaves a bit weird with line wraps.