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 */}