Working for a larger agency has many benefits. One of them is that you work with people, that know a lot more about many things then you do. I usually read commits from my colleagues to see how they do things. In one commit, I saw a CSS property I have never seen before: text-underline-offset ?
Styling links
In the early days of the World Wide Web, all links were underlined. With the rise of CSS and more modern designs, people wanted to have different styles for links. As the color and position of the text-decoration: underline was dictated by the used font and its color, it was often replaced with a border-bottom. This whoever caused many different issues, including in many cases a decreased accessibility of the links. With modern CSS there are now many different CSS properties you can use to style links … and which I have never heard of:
- text-decoration-color
- text-decoration-line
- text-decoration-skip (experimental)
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-thickness
- text-underline-offset
- text-underline-position
On the linked MDN Web Docs pages, you can try many of these properties yourself. I could probably find many very use-case for those properties and show you how they would look like, but I don’t want to spoiler it for you ?
Conclusion
When developing websites, one thing is always true: you can’t know everything. This is why I can highly recommend reading code from other people and get expired from their works. While these CSS properties might be already familiar to you, they totally blew my mind!