Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 11 Jun, 2021
Improve Article
Save Article

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.

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

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


<!DOCTYPE html>
        How to Set the Gap Between Text
        and Underlining using CSS ?
        .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;
    <h1 class="normal-underline">
        GeeksforGeeks: with normal underline
    <h1 class="line">
        GeeksforGeeks: with spaced underline



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!