For the past few weeks, my day job has been going through a bit of a redesign. As part of that, I’ve been asked by our design team to implement new headlines we’ve taken to calling “splashes”. And our design looked something like this:
I thought this looked pretty cool, and thought to myself, hey, CSS has come a long way, what could be so hard?
What in the hell were we thinking?
Our plan was seemed simple:
- Change the text underline cover on hover
- Allow text to reflow
- Make text act like a block element
- Be consistent experience across browsers
To me, the first and obvious choice was to try the text-decoration-color CSS property, naturally. Simple, one line fix and boom, it looked great on chrome!
Job well done. Time to get some coffee.
No, not really. Apparently, as of the time of this writing, support is limited on other browsers. Specifically, most of them. In most cases, the text color is ignored so my underline looked basically the same color as the font. In other cases, the under color changed, but it was pencil thin and wouldn’t change with font size.
Overall, I was bumbed. Crestfallen. A disgrace to my dojo.
What other options were there?
Well, so I did some Googling, and consulted with my team. Obviously the idea of border bottom came up, which had its own set of janky issues with what we were trying to pull off.
Some possible solution a very hacky layering…hack. In this case, I would render the block of text without the underline, and layer that over text with the underline in the hover color. The idea being, to toggle the two on mouse over. To get this one right, would have required some more hacky stuff from the JS side, which would have been surgery with a shotgun as far as I was concerned.
I found some cool articles from Medium written by some people who experienced the same issues and came up with a diverse set of solutions, which lead me to some experiments with linear gradients.
What worked?
In the end, I found something less hacky that made me feel warm and fuzzy: a linear gradient as a background image.
Something like this:
Using a linear gradient helped us scale the text better, proportional to our font size and was pretty easy to implement. Also, it worked on all browsers we cared about, which was a win in our book.
There were some caveats, in that the text’s underline, which remember is a background image, had some weird alignment issues. Remember, as our text was a block level element, the gradient underline would clip to the bottom of the entire block element, which was annoying.
To fix this, I had to add display: inline; property to the text, which was a property I had never really heard of at the time.
You live and you learn I guess!
Codepen experiment: