Fixing Multiline Link Styles

If you’ve ever created custom link styles to show on hover to replace the rather dull underline that is the default behavior for links, you may very well have encountered issues when links begin to wrap across multiple lines. Thankfully, CSS has a solution to this with a fairly obscure property: box-decoration-break.

The box-decoration-break property instructs the browser what to do when an element that is broken across multiple lines (referred to as fragmentation). The default value is slice which basically means the browser renders the element as if it wasn’t broken, then slices it into pieces to wrap across multiple lines. However, if you set the value to clone, each individual fragment will render independently so properties such as background-image will work as you would expect.

Thanks to this property, I was able to fix this problem on my own website where you are reading this post! Here is what it looked like before:

And then after applying box-decoration-break: clone:

The MDN docs provide a lot more detail and I’d highly recommend giving it a read.