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.
<!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
filter_none
Output:
