Tagged: text-decoration

Today I learned via Paweł Grzybek’s post on Mastodon, where Temani Afif pointed out that text decorations propagate to their descendants, they aren’t inherited.

The difference between propagation and inheritance is that the descendants don’t get their own text-decoration property. So, the line, color, style and thickness are all determined by the ancestor where text-decoration was declared.

A descendant can still declare its own text-decoration, but that creates an additional decoration on top, it doesn’t modify or remove the ancestor’s.

Today I learned about the CSS property text-underline-position. As Stuart mentions, the under value forces the underline to sit below all the descenders, giving you a consistent baseline.

a {
	text-underline-position: under;
}

Thanks to Kevin Powell, today I learned that the text-underline-offset property is named so because it only applies to underlines and not other text-decoration-line values like overline and line-through.

<a href="https://example.com">Example</a>

a {
	text-decoration-line: underline overline; /* We can set multiple line-decoration properties at once */
	text-underline-offset: 16px; /* Only impacts underline */
}