How to Set the Gap Between Text and Underlining using CSS ?

Introduction: CSS is used to make the website visually more appealing and more readable. It can be used to format the text on the website in various ways like color, font-size, font-family, etc. In this article, we are going to see how in the case of underlined text, increase the gap between text and underline.

Approach: The trick that we are going to use to achieve this by using border-bottom-style and padding-bottom property. Instead of using the built-in text-decoration: underline; we are going to create our own underline using border-bottom-style property and then we can add padding-bottom to push it away as much amount we want.

Syntax:

.class_name {
    padding-bottom: value;
    border-bottom-style: solid;
}

Example: We can increase the gap between the text and underlining using CSS.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE hyml>
<html>
   
<head>
    <title>
        How to Set the Gap Between Text
        and Underlining using CSS ?
    </title>
      
    <style>
        .line {
              
            /* Increase this as per requirement */
            padding-bottom: 15px;
            border-bottom-style: solid;
            border-bottom-width: 3.1px;
            width: fit-content;
        }
           
        .normal-underline {
            text-decoration: underline;
        }
    </style>
</head>
   
<body>
    <h1 class="normal-underline">
        GeeksforGeeks: with normal underline
    </h1>
      
    <h1 class="line">
        GeeksforGeeks: with spaced underline
    </h1>
</body>
   
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.