Definition
The text-underline-offset CSS property is used to control the positioning of the underline that is applied to text using the text-decoration: underline; property. It allows you to adjust the vertical offset or distance between the text and the underline.
Quick usage
Here’s an example of how to use the text-underline-offset property:
Here is some text
<style>
.demo-text-underline-offset {
text-decoration: underline;
text-underline-offset: 10px;
}
</style>
<p class="demo-text-underline-offset">
Here is some text
</p>In this example, the text-decoration: underline; property is applied to the <p> element to add an underline to the text.
The text-underline-offset property is set to 10px, which moves the underline 10 pixels below the baseline of the text. This creates a visual offset between the text and the underline.
The text-underline-offset property accepts both positive and negative values. Positive values move the underline below the baseline, while negative values move it above the baseline. By adjusting the value, you can control the spacing between the text and the underline to achieve the desired visual effect.
It’s important to note that the text-underline-offset property is not widely supported by all browsers, and its usage might have limited compatibility. Therefore, it’s recommended to use it with caution and consider fallback options or alternative techniques if broader browser support is required.
In summary, the text-underline-offset CSS property is used to adjust the vertical offset or distance between text and its underline. By manipulating this property, you can control the positioning and spacing of underlined text to achieve specific visual effects. However, it’s important to be aware of limited browser support and consider fallback options when using this property.