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.
 

Output: