how text-underline-offset depends on text-underline-position: under?

Question

While working on a project, I came across the fact that a text-underline-offset property works differently depending on the text-underline-position: under and I can’t understand why

that's what I mean

<p class="first">Paragraph</p>
<p class="second">Paragraph</p>

p{
  text-decoration: underline;
  text-underline-offset: 10px;
}

.first{
  text-underline-position: under;
}

preview

Answer 1

text-underline-offset allows us to set the offset distance of an underline line (-8px | 0 | 7px) while text-underline-position just allows us to set the specific position of the underline (auto | under). I hope these links help us to clear it.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

Answer 2

To understand this, you have to understand what exactly text-underline-position: under really means.

In typography, there are some invisible lines that run through the text. For this example, you just need to understand the baseline and descender. The baseline is where the bottoms of most normal letters like 'A', 'h', and 'C' rest. The descender is where the bottoms of letters like 'p', 'y', and 'q' rest. Subscripts like the 8 in 'C₈' align with the descender as well.

By default, when you use text-decoration: underline, the line is placed at the baseline. If you use text-underline-position: under, you're telling it to place the underline at the descender instead.

Therefore, when you use text-underline-offset, you're just adding offset to whatever position of the underline you set. Naturally, if the underline is at the baseline (default), text-underline-offset: 10px will create a smaller space than if the underline is at the descender.