Better Text Decoration With CSS’ text-underline-offset Bookmark

published on

I recently came across the text-underline-offset CSS property and I’m really surprised that I wasn’t aware that this fairly new property existed. There have been many times in the past where I wanted some more spacing between the characters and the underline and in many cases, I would then fall back on border-bottom in combination with a little bottom padding.

I have been putting this newly found, little helper into good use a few times recently, and it feels like a great improvement. Not only does it improve the visual look, but I find that it makes the underlined word, which is mostly a link, much more legible.

This is how text-underline-offset looks like in action: 

.example1 {
  text-decoration: underline;
  text-underline-offset: auto;
}

.example2 {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.example3 {
  text-decoration: underline;
  text-decoration-thickness: 0.25em;
  text-decoration-color: darkseagreen;
  text-underline-offset: 0.125em;
}

Ex 1: The fairy loved to dance on top of underlined letters

Ex 2: Other times it was possible to crawl between the offset

Ex 3: A solid underline made sure she would never fall and disappear

I’m not aware of any special guidance of text-underline-offset in terms of accessibility, but it serves as a nice addition to make text links a little more legible and easier on the eye, at least for some font choices, especially at small font sizes. Other than that, it also allows for some nice, creative possibilities to make things look a little more interesting.

Back to Notes