This is an old post. Information here may be out-dated, or the post may re­flect opin­ions or be­liefs I no longer share.

While bring­ing long over­due uni­for­mity to my site’s de­sign lan­guage, I ran into a very com­mon prob­lem: styling links.

Borders work great. You can change its color, style, and thick­ness. It’s a pure CSS so­lu­tion, and very easy to use.

However, it fails em­bar­rass­ingly when a sin­gle 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 prop­er­ties, we can start to pre­fer text-decoration to border as orig­i­nally in­tended, 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 prop­erly un­der­lined, and the ex­tra gap be­tween the text and the un­der­line is gone. The un­der­line also does­n’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 sup­port. In my re­cent and per­haps lim­ited ex­pe­ri­ence, it’s a browser that re­ally tries to stick to spec­i­fi­ca­tions. A good rea­son to switch if you haven’t yet!

Let’s look at the new prop­er­ties.

  • text-decoration-style - sim­i­lar to border-style, choose be­tween solid, dot­ted, dou­ble, dashed and even wavy!
  • text-decoration-color - by de­fault, an un­der­line in­her­its its color from the text it is ap­plied to. Specify a dif­fer­ent one us­ing this prop­erty.
  • text-decoration-thickness - sim­i­lar to border-width, spec­ify the thick­ness of the un­der­line.

A cou­ple more in­ter­est­ing prop­er­ties:

  • text-decoration-offset - spec­ify how far away from its orig­i­nal po­si­tion should the un­der­line be.
  • text-decoration-position - go around glyphs or un­der; great for in­ter­na­tion­al­iza­tion. Supports ver­ti­cal text as well!

Do con­sider look­ing at text-decoration-skip if sup­port­ing Safari is im­por­tant given your user-base.

All the prop­er­ties have self-ex­plana­tory and kind-of ob­vi­ous names, which is very good to see.