DEVseo

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!

I give you, the animated external link!

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!

An 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 Note Change The Position?

And, as a final note, you could also change the animation position if you wanted to:

From The Right

From The Left

---

Replace The Text With An Icon

How about the text sliding out and the icon sliding in? That's possible too, but annoyingly requires an extra element inside the anchor (unless any cleverer people can work out another way!) to make work.

Bye Bye!