This content originally appeared on Go Make Things and was authored by Go Make Things
Let’s just get this out of the way: in bodies of text, links should always be underlined or highlighted in some way other than just color.
For people with color-based vision disabilities, the contrast between link color and text color may be insufficient. Adding an underline ensures that the link is always detectable as one to the people who use your site.
(For navigation lists, where it’s obvious that each item is link, this may not apply.)
A lot of folks think underlined links look ugly, though, so today, I wanted to share a few ways to style links with underlines so that they’re not. Let’s dig in!
text-decoration-skip-ink
The text-decoration-skip-ink tells browsers how to treat descenders in text.
A value of auto is now the default in most browsers, and will interrupt an underline when it is going to come in contact with a glyph. A value of none will cause the underline and characters to touch.
a {
text-decoration-skip-ink: auto;
}Here’s a demo of the text-decoration-skip-ink property.
text-decoration-color
By default, link underlines are the same color as the text. But you can use the text-decoration-color property to style them in a different color.
Here, links are blue, but have an underline color of red.
a {
color: blue;
text-decoration-color: red;
}Here’s a demo of the text-decoration-color property.
text-underline-offset
The text-underline-offset can be used to change where the underline is positioned. A positive value pushes is further below the text, while a negative one moves it up into the text.
a {
text-underline-offset: 0.5em;
}Here’s a demo of the text-underline-offset property.
text-decoration-thickness
The text-decoration-thickness controls how thick the underline is. Surprisingly, a fraction of an em is much thicker than the default auto value.
a {
text-decoration-thickness: 0.5em;
}Here’s a demo of the text-decoration-thickness property.
Combining property
All of these properties can be mixed-and-matched to get the look you want.
a {
color: blue;
text-decoration-color: red;
text-underline-offset: 0.25em;
text-decoration-thickness: 0.25em;
}The Vanilla JS Academy is a project-based online JavaScript workshop for beginners. Click here to learn more.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2023-05-03T14:30:00+00:00) How to style links that don’t look ugly. Retrieved from https://www.scien.cx/2023/05/03/how-to-style-links-that-dont-look-ugly/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.