I originally thought just adding a pseudo element beneath the text and growing the height would do the trick, but I figured out that they don’t account for when the link wraps around a border. Fortunately, I found two ways to create that neat highlight effect across multiple lines:
Background Image
Using a linear-gradient background image allows us to essentially move the highlight from the bottom to the top. We will use the background-position property to lower the background image to the bottom of the link and hide the overflow. It’s important that we add background-repeat: no-repeatso that we get that neat underline affect on the inactive state.
See the Pen Multi-Line Link Highlight: Background-Image by Ed Cupaioli (@ecupaio) on CodePen.
Inset Box-Shadow
The inset box-shadow is less code and simpler, but doesn’t get the underline quite where I want it, but this allows you to have more control over the underline size. You can also add a border-bottom if you want to add to the height. We are just adding an inset box-shadow to the link with a negative Y offset, then transitioning it to the full height of the link text (1em):
See the Pen Multi-Line Link Highlight: Box-Shadow by Ed Cupaioli (@ecupaio) on CodePen.
Feel free to fork these code pens and use the source code on your own projects.