How to Increase the Space Between Text and Underlining in CSS

Unfortunately for web designers, CSS does not provide many options for the underlines below texts. You may have difficulty when trying to increase the gap between a text and its underlining.

In this snippet, we'll show how to do this. Just follow the steps below!

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

<div>
  <span>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </span>
</div>

Add CSS

div {
  width: 400px;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #1f67db;
  line-height: 48px;
}

Here you can see the result of our code.

Example of increasing the space between a text and its underlining:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 400px;
      }
      span {
        padding-bottom: 10px;
        border-bottom: 1px solid #1f67db;
        line-height: 48px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
    </div>
  </body>
</html>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

In this example, we increased the space between the text and underlining with a border-bottom. You can control the space using line-height and padding-bottom properties.

Let’s see another example, where we use the <span> element inside a <p>. In this example, too, we use the same border-bottom and padding-bottom properties for the <span> as in the previous example, and also we set the display property to "inline-block".

Example of increasing the space between a text and its underlining using only a <span>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
    <style>
      span {
        display: inline-block;
        border-bottom: 1px solid #000;
        padding-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>
      <span>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </span>
    </p>
  </body>
</html>

However, you may have difficulty using border-bottom as it may not provide full control over the underlining. To have more pixel accuracy, you can 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;
}

You can position the underlining where you want by changing the value of the bottom property.

Example of increasing the space between a text and its underlining using the ::after pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
    <style>
      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;
      }
    </style>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs</a>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>
It is not possible to increase the space between a text and its underlining if you use the text-decoration property set to “underline”.