Understanding the CSS style property text-underline-offset

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:

When we run the above code, it will appear as follows in the browser:

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:

Now, let's try executing how it appears in reality.


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:

When the code is executed, it is output as follows:

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.