Helping Towards Informative Links

So, there seems to be a bit of a debate going around at the moment about how to highlight what a link does, or where it goes. As an example, external links on Wikipedia have a little arrow to the right that indicates you will leave the site when you click it (or it opens in a new window. This is a moot point). That’s quite handy but doesn’t look that great. Especially when you have lots of them together, like at the bottom with all of the references.

So, how about we jazz things up with a little CSS magic!? Below is an external link. I’ve made this external by adding a rel attribute of “external” to it. Semantic. But this also comes in handy with CSS3 where you can style elements based on their attributes. This means we can style any anchor that has an attribute of rel=”external” in any way we want!

An External Link

Please note, there is no javascript here and it will only work this nicely in browsers that support attribute styles in CSS3, and transitions (those that don’t it’ll just appear). But that’s pretty much all of the modern, and popular ones covered!

So, what about other file types? Well, just do the same thing, but change the rel (granted this is a little misuse of the attribute now, so you may well be better off using data-attributes or something) to anything you desire, find the right icon and boom!

A Link To A File

Let me know in the comments what you think, and here’s the code for the above two examples:

a[rel*='external'],
a[rel*='file'] {
	position: relative;
}

a[rel*='external']:after,
a[rel*='file']:after {
	content: "\f08e";
	font-family: "FontAwesome";
	font-size: 12px;
	left: 50%;
	margin-left: -6px;
	opacity: 0;
	position: absolute;
	top: -22px;
	-webkit-transition: all .25s linear;
	   -moz-transition: all .25s linear;
	    -ms-transition: all .25s linear;
	     -o-transition: all .25s linear;
	        transition: all .25s linear;
}

a[rel*='external']:hover:after,
a[rel*='file']:hover:after {
	opacity: 1;
	top: -18px;
}

a[rel*='file']:after {
	content: "\f016";
}

Why not change the animation position?

You don’t have to animate the icon from the top. You can change the direction if you prefer.

For example, you could animate it from the right or from the left by adjusting the left, right, or top values in the CSS.

Replacing text with an icon

It is also possible to animate the text out and animate an icon in. However, this requires an additional element inside the anchor tag (such as a span). Without that extra element, CSS alone cannot animate the text independently.

Final thoughts

This approach keeps the HTML clean, uses no JavaScript, and allows you to add subtle visual hints to links using nothing but CSS.

Let me know what you think.

Bye Bye!