Skip to content

Understanding the naming of `text-underline-offset`

The text-underline-offset CSS property sets how far you want the underline to be from its default position.

a {
	text-underline-offset: 4px;
}

The Issue

The text-underline-offset property trips me up quite frequently because all the other underline style properties are linked to the text-decoration property and this causes a lot of confusion.

a {
	text-decortion-thickness: 4px;
	text-decoration-style: solid;
	text-decortion-color: red;
	text-underline-offset: 4px;
}

Today I Learnt

Thanks to Kevin Powell, today I learnt that the text-underline-offset property is named so because it only applies to underlines.

As per MDN:

text-underline-offset is not part of the text-decoration shorthand. While an element can have multiple text-decoration lines, text-underline-offset only impacts underlining, and not other possible line decoration options such as overline or line-through.

Back to Notes Archive