DEV Community

Linda Thompson
Linda Thompson

Posted on • Originally published at on

TIL - Text-decoration Shorthand!

While I was testing my new dev site on different browsers today, I noticed that some of my links didn't have their text decoration showing. This was odd to me, since text decoration has been a thing for a long time. So I did a little investigating, and learned a bit about the text-decoration shorthand.

It combines a few different properties:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style

And a new property: text-decoration-thickness! However, the thickness property is only supported in Firefox right now - it's part of CSS4, so not officially, fully available yet. So it doesn't work in Chrome or Safari yet. (Actually, thickness is available for Safari right now too - just not as part of the shorthand. It has to be declared separately.) Just happens to be my luck that Firefox is my current browser of choice. :)

So in my code, what I had was

text-decoration: 2px solid underline var(--lightBasic)
Enter fullscreen mode Exit fullscreen mode

But the 2px part is the thickness property, so wasn't showing properly. Removed that, and all three browsers looked the same!That's my interesting tidbit for the day. 😎 Happy coding, friends!

Latest comments (0)