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

Enhancing the Space between Text and Underlining in CSS

In the realm of web styling, CSS enables us to adorn text with underlining using the 'text-decoration:underline' property. However, if you desire to amplify the gap between the underlined text and the actual text, direct CSS modifications might not suffice.

Solution:

To achieve the desired spacing, consider substituting the underline with a border-bottom accompanied by padding-bottom. This technique grants precise control over the spacing and allows you to manipulate the color of the "underline."

Implementation:

1. For single-line text: Use 'border-bottom: 1px solid #000' and 'padding-bottom: 3px';
2. For multicolored "underlines": Omit the color declaration in 'border-bottom' (e.g., 'border-bottom-width: 1px; border-bottom-style: solid;');
3. For multiline text: Wrap multiline text within a 'span' element within the parent element. Then, apply 'border-bottom' and 'padding-bottom' to the 'span'.

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