The “text-underline-offset” and other lesser known CSS properties for links

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:

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 ?


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!

Posted by

Bernhard is a full time web developer who likes to write WordPress plugins in his free time and is an active member of the WP Meetups in Berlin and Potsdam.

Leave a Reply

Your email address will not be published. Required fields are marked *