Customize text-decoration and style links with ease.

While bringing long overdue uniformity to my site’s design language, I ran into a very common problem: styling links.

Borders work great. You can change its color, style, and thickness. It’s a pure CSS solution, and very easy to use.

However, it fails embarrassingly when a single line of text wraps into a multi-line text.

Here’s how it looks:

See how it only “underlines” the last line of text? Thanks to some new CSS properties, we can start to prefer text-decoration to border as originally intended, and have nicely styled links with a lot of ease:

Now each line of text is properly underlined, and the extra gap between the text and the underline is gone. The underline also doesn’t go over or through glyphs like y, p, and so on.

If you use Firefox and are on v70 and over, most of these seem to have very good browser support. In my recent and perhaps limited experience, it’s a browser that really tries to stick to specifications. A good reason to switch if you haven’t yet!

Let’s look at the new properties.

• text-decoration-style – similar to border-style, choose between solid, dotted, double, dashed and even wavy!
• text-decoration-color – by default, an underline inherits its color from the text it is applied to. Specify a different one using this property.
• text-decoration-thickness – similar to border-width, specify the thickness of the underline.

A couple more interesting properties:

• text-underline-offset – specify how far away from its original position should the underline be.
• text-decoration-position – go around glyphs or under; great for internationalization. Supports vertical text as well!

Do consider looking at text-decoration-skip if supporting Safari is important given your user-base.

All the properties have self-explanatory and kind-of obvious names, which is very good to see.

Last updated on 21 July 2021.