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Ā­ļ¬Ā­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.