Question 271901 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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 ‘C8‘ align with the descender as well.

    enter image description here

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search