How Can I Increase the Space Between Underlined Text and the Underline in CSS?

Enhancing the Underline Gap using CSS

Creating visual distinction between text and its underline is essential for readability. While CSS offers the text-decoration:underline property to add an underline to text, it doesn't provide any direct method to adjust the gap between the text and the line.

Alternative Solution

Instead, consider employing the border-bottom property with the solid style and a non-zero width. This creates a border below the text, effectively mimicking an underline. Additionally, applying padding-bottom increases the vertical space between the text and the border, creating the illusion of a larger gap.

For instance, the following code sample establishes a 1px black border below the text with a 3px padding below it:

border-bottom: 1px solid #000;
padding-bottom: 3px;

Color Customization

If you desire the border color to match the text color, simply omit the color declaration, resulting in border-bottom-width: 1px and border-bottom-style: solid.

Multiline Text Handling

For multiline text, wrap it within a span element nested inside the main element. Subsequently, apply the border-bottom and padding properties to the span element. This technique effectively extends the gap between the text and the underline for multiline scenarios.

The above is the detailed content of How Can I Increase the Space Between Underlined Text and the Underline in CSS?. For more information, please follow other related articles on the PHP Chinese website!