The text-underline-position CSS property is used to control the position of underlines applied to text. It allows you to specify whether the underline should be positioned below the text (the default behavior) or above the text.
The text-underline-position property accepts the following values:
-
auto: This is the default value. The underline is positioned below the text, with a small gap between the text and the underline. -
under: The underline is positioned below the text, directly touching the baseline of the text. -
left: The underline is positioned above the text, parallel to the baseline, with a small gap between the text and the underline. -
right: The underline is positioned above the text, parallel to the baseline, with a small gap between the text and the underline.
Here’s an example:
.underlined-text {
text-underline-position: under;
}
In this example, the .underlined-text class sets the text-underline-position property to under, positioning the underline below the text without any gap.
It’s important to note that the text-underline-position property may have limited support across different browsers and may not be widely supported in older browser versions. Additionally, the effect of changing the underline position may vary depending on the font and other text styling properties.
The text-underline-position property is primarily used for typographic or design purposes when you want to modify the position of underlines for specific text elements. It can be helpful in cases where you want to achieve a unique or customized visual appearance for underlined text.
However, keep in mind that changing the underline position can affect the legibility and readability of text, especially if the underline intersects with descenders or ascenders of letters. It’s important to consider the overall design and ensure that the modified underline position enhances the visual presentation without compromising readability or accessibility.