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

Question

When we’re using a text-decoration: underline we have an underlining applied to it. However my doubt is the following:

• It is possible to change the distance between text and underline?
• If yes, it has some direct property in CSS that we can use to put spacing?
• In addition, it is possible to use an image as underline for a text?

Answer 1

Is not possible.

Browsers take due care to use only the spacing between the baseline and the beardline of the text precisely so as not to change its dimensions (space called 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 further that the source, by itself, stands over the underline, that is, the line does not cut the letters using spacing descend. And you can’t change that distance just because there’s no more space in the element. You only have space descend to render the line and it is already used by the browser.

There are other ways to generate a similar effect, but they all have consequences. You could set the bottom edge in the way you want and control the spacing with padding-bottom, but it changes the dimensions of border box of its element, reflecting directly on its 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 to facilitate the visualization. In one of them, 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 avoids the line overwriting the text, but you break its layout getting a line larger than the others.

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

Answer 2

It is possible to change the distance between text and underline?

Yes as colleagues have already demonstrated you can increase the distance between what would be a underline and the text. I’ll just add a few things to complete what you asked at the beginning.

But in the future I believe we will have news about this, because the W3C has in its Drafts a property dedicated to it.

text-underline-offset: official documentation W3C https://www.w3.org/TR/css-text-decor-4/#underline-offset

"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 em Units so that the offset Scales with the font."

If yes, it has some direct property in CSS that we can use to put spacing?

To ward off the underline original, created by text-decoration: underline at present there is no such property.

Since to text-Decoration we have only these 3 property:

text-decoration-line

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

text-decoration-color

Sets the line color

text-decoration-style

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

Here’s the Mozilla documentation if you want to check it out: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration#Syntax

There is still the property text-underline-position but it is used to underline texts vertically etc., it is not for this kind of thing, although it has a correction for when the "descendants" go over the line.

Source W3C: https://www.w3.org/TR/css-text-decor-3/#text-underline-position-Property

In addition, it is possible to use an image like underline for a text?

Yes it is also possible, but take into account what other colleagues have said. The example I did was with a pseudo element ::after, it will always have 100% of the width of the tag, and how I used measures in rem and em it will always follow a proportion relative to the size of the 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>

Answer 3

.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>

According to the padding increase, the edge line goes away from the text and also has to change the value of line-height, otherwise the line will be on top of the text.

Answer 4

To n ways to do this, I’ll introduce you to one of them, the border-bottom option would be the best in the case of a large text, but here’s another way to do:

<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