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

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.


Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!