This content originally appeared on Go Make Things and was authored by Go Make Things
Kelp uses a dotted underline for its links.
(Like all things in Kelp, this can be customized with a CSS variable.)
The dots are more subtle than a solid underline, but still provide a visual affordance other than color. This is an important guideline in how Kelp focuses on accessibility at its core.
But of course, Safari fucks things up a bit!
The text-decoration property is a shorthand property that combines text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness into a single declaration.
/* This... */
a {
text-decoration: underline dotted;
}
/* Is the same as this... */
a {
text-decoration-line: underline;
text-decoration-style: dotted;
}Safari/WebKit doesn’t recognize text-decoration-style as part of the shorthand, sees a value it doesn’t expect, and ignores the whole thing.
As a result, a value of underline dotted results in no text-decoration at all!
To use the full shorthand property, you need to use a -webkit- prefix like it’s 2012 or something. And it needs to come after the regular text-decoration property rather than before.
/* This... */
a {
text-decoration: underline dotted;
-webkit-text-docoration: underline dotted;
}Because Safari does know what text-decoration is, it takes priority if you lead with the prefixed version, which is the opposite of how you’d normally do things.
Kelp makes this simpler by defining --decoration-text-link and --decoration-text-link-hover CSS variables, and using those so you don’t have to manually update multiple properties with the same value.
:root {
--decoration-text-link: underline dotted;
--decoration-text-link-hover: underline;
}
a {
text-decoration: var(--decoration-text-link);
-webkit-text-decoration: var(--decoration-text-link);
}
a:hover {
text-decoration: var(--decoration-text-link-hover);
-webkit-text-decoration: var(--decoration-text-link-hover);
}Learn more about Kelp at KelpUI.com.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-07-09T14:30:00+00:00) text-decoration-style in WebKit. Retrieved from https://www.scien.cx/2025/07/09/text-decoration-style-in-webkit/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.