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)
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!
Top comments (0)