Stylish link styling

A simple way to make links feel more alive using CSS

Links are one of the most foundational of all HTML tags. They have served as the basis for navigation on the web since the very first webpage. And ever since then, we’ve come to expect a sort of boring default blue/underline style to indicate that a chunk of text links off to some other webpage:

Nearly all browsers default to this sort of styling, and like most browser defaults, designers and developers override those god-awful styles as soon as possible (with a notable exception or two, of course).

But because we’ve come to expect this sort of styling, many websites offer only slight variations on this default. Twitter, for example, simplifies the default by setting links to text-decoration: underline; when hovered over (plus they slap your theme colour onto it):

There is nothing wrong with this styling, in fact it’s very helpful to the user if there is some commonality between navigational user interfaces across the web. Most internet users today have a sort of cognitive muscle-memory about navigating web pages, so making a link look somewhat as they have for the past 20+ years is a good idea.

We can do better than this…

But it’s 2017 now, and given the modern wonders of CSS, I always like to add a bit of flair to my links with this one simple animation trick. I mostly do it because it’s super easy to implement and works well in pretty much all browsers, if you use Autoprefixer.

A better alternative

Let me take you through a better way to handle link styling. Let’s say our super awesome client gives us their website and asks us to update the link styling. Currently their site looks like this:

This dude’s been a client of mine for years. Never pays on time.

The link styling is very default-ish, with text-decoration being removed when :hovering over the element, reverse-Twitter style, as shown above.

Let’s improve that user interaction, but in a way that is both visually interesting while still making it clear that this is a link which is actionable. I love animated underline effects for this, because to me it feels like the grown-up CSS3 version of the default underline style shown above. Let’s make something that looks more like this:

very waves, much ux

Okay so since text-decoration is not an animatable CSS property (although text-decoration-color apparently is), we’re going to have to try something else. We must treat the bottom line as it’s own element, and there are two ways to handle that. One is to add an extra HTML element, but that’s 👎 so let’s instead use the :before pseudo-element in CSS. No excess markup!

First we must ensure that the link text itself will act as the outer bounds for our absolutely-positioned underline element. We do that with by applying relative positioning and display: inline-block to the link element:

Now we can add the styles that make up the :before element. Make it’s background-color the same as the text colour, and then give it a position: absolute to the bottom of the link element. Finally, set the height based on how thick you want the underline to be:

The final thing to do is to add the animation effect on :hover, where we go from the full width of the element to zero (also the opposite is a nice effect).

Boom! 💥 We now have a nice animated underline effect. But we can improve even this, by making our underline centred by setting the left property and using some translateX magic ✨✨✨

Yep now we’re looking real good. 😎

This nice hover effect communicates to the user in a visual and meaningful way that this text is actionable. It makes it more enjoyable to click, which if you’re looking to keep users navigating around your site is a powerful feeling to evoke. And it really didn’t take a whole lot of CSS to accomplish, in fact I created a Less mixin that you can easily drop into any project.

A world of possibilities 🌎

There are so many other neat transition hover effects you can do with links to make them seem even more actionable. And think about the fact that you can also use the :after pseudo-element in the same way; it sure opens up a lot of possibilities. Check these out (from Codrops):

I hope I’ve shown just how simple it can be to enhance the user experience of navigating your website or app. I also hope we start to see more and more interesting animation on the web when we want to signify to the user that our links, buttons, or form elements are actionable, and more importantly show the user that these components want to be interacted with.

Feel free to hit me up with your comments and most interesting/unique uses of this technique @dave_lunny ✌️