Web development and Tech news Blog site. WEBISFREE.com

HOME > css

Understanding the CSS style property text-underline-offset

Last Modified : 27 Feb, 2023 / Created : 27 Feb, 2023
View Count
Recently, we learned about the text-decoration property as a text style attribute in a post. This time, we will learn about the related property, text-underline-offset.

# Learning about text-underline-offset

This style property is used in conjunction with text-decoration and is a very useful property for adjusting the position of the underline line when using underline as a value in text-decoration. The syntax is simple, as shown below:

text-underline-offset: 2px;

Now let's take a look at how it is actually used with examples.

! See examples of text-underline-offset

Below are a few brief example codes we will create. First, we write and use the underline effect without using the text-underline-offset property, as follows:
<span style="text-decoration: underline">Not using text-underline-offset</span>

When we run the above code, it will appear as follows in the browser:
<span style="text-decoration: underline">Not using text-underline-offset</span>

Now, let's apply text-underline-offset with a few different values and see how it appears:

One. text-underline-offset: 0px;
Two. text-underline-offset: 3px;
Three. text-underline-offset: 6px;

We can write the HTML code as follows to apply these values:
<span style="text-decoration: underline; text-underline-offset: 0px;">text-underline-offset: 0px;</span>
<span style="text-decoration: underline; text-underline-offset: 3px;">text-underline-offset: 3px;</span>
<span style="text-decoration: underline; text-underline-offset: 6px;">text-underline-offset: 6px;</span>

Now, let's try executing how it appears in reality.
<span style="text-decoration: underline; text-underline-offset: 0px;">text-underline-offset: 0px;</span><br /><br />
<span style="text-decoration: underline; text-underline-offset: 3px;">text-underline-offset: 3px;</span><br /><br />
<span style="text-decoration: underline; text-underline-offset: 6px;">text-underline-offset: 6px;</span>

As you can see, you can see that the position of the text underline is gradually moving down by the size of the corresponding pixels. Note that a value of 0 represents the same result as not setting the text-underline-offset.

So far, we have used the text-underline-offset property of CSS to move the underline position as desired.

! Simple tips and information

Q) Can we use negative values instead of positive values as the value of text-decoration?
For example, if you set a negative value (-) to set the text underline above instead of below, what will happen? The following code sets -3px:
<span style="text-decoration: underline; text-underline-offset: -3px;">text-underline-offset: -3px;</span>

When the code is executed, it is output as follows:
<span style="text-decoration: underline; text-underline-offset: -3px;">text-underline-offset: -3px;</span>

As you can see from the results, the desired negative value has been applied. However, when used with the text-decoration-thickness property, the result may differ. In other words, if you use text-decoration-thickness together, the style with the applied negative value will not be visible.

So far, we have learned about the text-underline-offset property.
Perhaps you're looking for the following text as well?


Creating squares and rectangles using CSS grid layout


CSS Property text-decoration