New CSS to style underlines

Mozilla’s Jen Simmons posted a video on YouTube recently talking about some new CSS for styling underlines, “text-underline-offset,” “text-decoration-thickness,” and “text-decoration-skip-ink.” The video I am referring to is embedded below and I added a few simple code examples down below as well.

I think these new styles will be useful and web developers can now stop using CSS borders to style underlines (for those that do) and use this new CSS instead. Just a heads up though, as Jen mentions in her video, that right now this new CSS only works in the Mozilla Firefox and Safari (and maybe soon in Chrome) web browsers.

Video: New CSS for Styling Underlines on the Web

Code example using: text-underline-offset

The new CSS property “text-underline-offset” lets you set the amount of space between the underlined text and the actual underline. You can read more about it on the awesome MDN web docs site.

CSS:
<style>
.link1 {
    text-underline-offset: 3px;
}
</style>

HTML:
<a class="link1" href="#">Link 1</a>

Code example using: text-decoration-thickness

The new CSS property “text-decoration-thickness” lets you set the thickness of the actual underline. You can read more about it on the awesome MDN web docs site.

CSS:
<style>
.link2 {
    text-decoration-thickness: 3px;
}
</style>

HTML:
<a class="link2" href="#">Link 2</a>

Code example using: text-decoration-skip-ink

The new CSS property “text-decoration-skip-ink” lets you specify how overlines and underlines are displayed when they encounter text that hangs low/or is tall. An example in the English language would be: p, g, y. It’s easier to understand this one by viewing the actual underlines. You can read more about it on the awesome MDN web docs site.

CSS:
<style>
.link3 {
    text-decoration-skip-ink: auto; /* value can also be "none" which makes the underlines/overlines go right through the text */
}
</style>

HTML:
<a class="link3" href="#">Link 3, test: p g y</a>