DEV Community

Linda Thompson
Linda Thompson

Posted on • Originally published at lindakat.com on

1 1

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up