CSS underline distance from text position

CSS Underline Distance from Text Position

In web design, sometimes we need to add underline to text to highlight important content. However, by default, the distance between the underline and the text may be unsatisfactory. This article will detail how to use CSS to adjust the distance between the underline and the text to achieve a better visual effect.

Underlining Basics

In traditional printed books, underlines are often used to mark important content or draw readers’ attention. In web design, underlines can also serve this purpose. In CSS, you can use the text-decoration property to underline text. Common property values ​​include underline, overline, and line-through.

span {
text-decoration: underline;
}

<p>This is a <span>highlighted</span> text.</p>

The above code snippet shows how to underline text using CSS. However, if you use this code directly, you may find that the distance between the underline and the text is not ideal. Next, we’ll show you how to adjust the distance between the underline and the text.

Adjusting the Position of the Underline

Using the text-decoration-color Property

CSS3 introduced the text-decoration-color property to set the color of text decorations, including underlines. By adjusting the underline-color property value, you can adjust the underline’s position.

span {
text-decoration: underline;
text-decoration-color: red;
} 

<p>This is a <span>highlighted</span> text.</p> 

In the code above, we set the underline color to red. While this makes the underline stand out more, it doesn’t change the distance between the underline and the text.

Using the text-underline-offset Property

CSS3 also introduced the text-underline-offset property, which sets the vertical offset between the underline (or other text decorations) and the text. By adjusting this property value, you can adjust the distance between the underline and the text.

span {
text-decoration: underline;
text-underline-offset: 2px;
}

<p>This is a <span>highlighted</span> text.</p> 

In the code above, we set the vertical offset between the underline and the text to 2 pixels. This allows us to adjust the position of the underline to better match the text.

Summary

By using the text-decoration-color and text-underline-offset properties, we can flexibly adjust the distance between the underline and the text to achieve a better visual effect. When designing a web page, we should adjust the position of the underline according to the specific situation to make it more consistent with the overall style and layout requirements.