This content originally appeared on foobartel.com :: All Posts and was authored by foobartel.com :: All Posts
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.
This content originally appeared on foobartel.com :: All Posts and was authored by foobartel.com :: All Posts
foobartel.com :: All Posts | Sciencx (2022-01-20T23:00:00+00:00) Better Text Decoration With CSS’ text-underline-offset. Retrieved from https://www.scien.cx/2022/01/20/better-text-decoration-with-css-text-underline-offset/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.