How to increase the space between text and underline in CSS?

Not possible.

Browsers are careful to only use the spacing between the baseline and beardline of the text exactly so that it does not change its dimensions descend ).

So much so that the underline fits according to the size of the text without problems:

<a href=""><h1>Cabeçalho 1</h1></a>
<a href=""><h2>Cabeçalho 2</h2></a>
<a href=""><h3>Cabeçalho 3</h3></a>
<a href=""><h4>Cabeçalho 4</h4></a>

Note also that the font itself stands above the underline , that is, the line does not cut the letters that use the descend spacing. And it is not possible to change this distance precisely because there is no more space in the element. You only have descend space to render the line and it is already used by the browser.

There are other ways of generating a similar effect, but all have consequences. You could set the bottom border the way you want and control the spacing with padding-bottom , but this changes the dimensions of border box of your element, reflecting directly in your layout.

a:nth-child(1) {
    text-decoration: none;
    border-bottom: 5px solid red;
    padding-bottom: 10px;
}

a:nth-child(2) {
    text-decoration: none;
    border-bottom: 5px solid red;
    padding-bottom: 10px;
    display: inline-block;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pharetra mi metus, ut rhoncus metus elementum eget. Ut <a href="">Bazinga</a> porttitor sapien vel massa dapibus maximus. Vivamus ullamcorper, nisi gravida aliquam pulvinar, lectus eros lacinia quam, eu imperdiet diam diam quis tortor. Integer fermentum scelerisque efficitur. In eu turpis lacus. Vestibulum <a href="">Bazinga</a> sollicitudin elit nisl, sit amet venenatis ex dapibus id. Proin in lectus sem. In vehicula ante iaculis diam consectetur rhoncus. Nam nec rhoncus turpis, vel ullamcorper neque. Morbi rhoncus tincidunt lacus at varius.</p>

I made the lines very grotesque for easy viewing. In one, you change the border box of an element that has display: inline by default, which means that your line will be over the rest of the text making it impossible to read; in the second, the element becomes display: inline-block , which prevents the line from overwriting the text, however you break your layout by getting one line larger than the others.

You could also set a background image with the line and spacing you want, but you risk getting stuck to the dimensions of the font. If you change the text size, you will need to adjust the background image.

  

Is it possible to change the distance between the text and the underline?

Yes, as colleagues have already shown you can increase the distance between what would be an underline and the text. I'll just add a few things to complete what you asked in the beginning.

But in the future I think we'll have some news about this, as W3C has in its drafts a dedicated property for this.

text-underline-offset : official W3C documentation link

"Specifies the offset of underlines as a length." This replaces any information in the font or derived from glyph shapes / character ranges. Authors are strongly encouraged to use in units so that the offset scales with the font.

  

If yes, do you have any direct CSS property that we can use to put the spacing?

To remove the original underline , created by text-decoration: underline , there is no such property yet.

Since for text-decoration we only have these 3 properties:

text-decoration-line

Sets the type of decoration used, such as underline or line.

text-decoration-color

Defines the line color

text-decoration-style

Defines the line style, solid , wavy , dashed etc ...

Here's the Mozilla documentation if you'd like to check out: link

There is still the text-underline-position property but it is used to place underline in vertical text etc, not for this kind of thing, although it has a correction for when descendants go beyond the line. >

W3CSource: link

  

In addition, can you use an image as underline for a text?

Yes it is also possible, but take into account what the other colleagues have said. The example I made was with a ::after pseudo element, it will always be 100% of the tag width, and since I used measurements in rem and em it will always keep a relative proportion to the size of font-size

p {
    line-height: 2em;
    font-size: 1rem;
}
span {
    display: inline-block;
    position: relative;
    font-size: 1em;
}
span::after {
    content: "";
    position: absolute;
    top: 2em;
    left: 0;
    width: 100%;
    height: 0.2em;
    background-image: url(https://placecage.com/50/50);
}
span:nth-child(2) {
    font-size: 1.25em;
}

<p>
    Lorem ipsum dolor sit, amet consectetur <span>adipisicing 123 abc</span> elit. Quod dolore natus voluptates at a soluta ad nulla aspernatur <span>consequatur</span> ducimus! Adipisci reprehenderit itaque delectus, molestias magni recusandae blanditiis eos libero quisquam voluptatibus deleniti eveniet numquam corporis porro nulla laudantium quibusdam quam sunt ea temporibus ratione incidunt! Incidunt possimus rem illo quam cum minima ad aut sunt sapiente consequuntur eum inventore ipsum, dignissimos quaerat neque deserunt nisi, odit, suscipit quo molestias ut illum officia. Voluptatem magni ipsa nobis facere voluptate deserunt minima adipisci voluptas sapiente dolore placeat facilis perspiciatis repudiandae tenetur aut at, nam id voluptatum atque libero! Veritatis, qui maxime.
</p>

.sublinhado{
  text-decoration: none;
  border-bottom: 1px solid black;
  padding-bottom: 3px;
  line-height: 1.5;
}

<p> <span class="sublinhado">Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste </span> </p>

As padding increases, the border line goes away from the text and also has to change the value of line-height , otherwise the line will stay on top of the text.

A n ways to do this, I'll introduce you one, the option to do border-bottom would be the best in case of a large text, but here's another way to do: / p>

<p class="op1">
Texto sublinhado 1
</p>
<p class="op2">
Texto sublinhado 2
</p>
<style>
p.op1:before {
  content:"_______________";
  padding-top: 2px;
  position:absolute;
}
p.op2:before {
  content:"_______________";
  padding-top: 5px;
  position:absolute;
  color:red
}
</style>

JSFIDDLE