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:

An image from my blog page showing how border-bottom fails over a multi-line text/link - only a single line is drawn under the last line.

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:

An image for my blog page showing how text/links are styled properly even if it wraps into a multi-line string, with each line of text being underlined.

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:

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.