TIL: text-decoration-offset

October 22, 2024

TIL text-decoration-offset a CSS property that we can use to adjust the underline on your underlined text. Usually what I do is add a border-bottom instead on the text if I wanted to add a gap between the text and underline which is not really the best solution on some cases.

<div>
	<a src="#"> Link </a>
</div>

a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

Browser support https://caniuse.com/?search=text-underline-offset