DEVseo

Making It Your Web

Helping Towards Informative Links

  • Posted 21st Jan 2014 @ 11:02:37
  • Last update 21st Jan 2014 @ 13:26:38
  • By Alex Hall
  • In / CSS3 // Tutorial /

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!

Comments (8)

Sliding icon by Mike

on 21st Jan 2014 @ 13:33:31

How about this? http://codepen.io/migstopheles/pen/gDniH

Needs a fixed height on the link unfortunately, but it would work 9/10 I guess.

You could also replace the line-height for text-indent on :hover to have it exit stage left (or right)

1 0

Reply

Nice! by Alex Hall (author)

on 23rd Jan 2014 @ 11:01:25

Thanks Mike, that's a nice way of doing it

0 0

Reply

Re: Link Aids by Naj

on 22nd Jan 2014 @ 23:46:28

I like this. Thank you for sharing.

0 0

Reply

vertical rhythm by Kilwag

on 23rd Jan 2014 @ 04:25:51

I like it, except for the ones coming in at the top, you need to show those inline with other text to see how it would work in a real world situation. Most links don't appear isolated in their own paragraph.

0 0

Reply

Good Point by Alex Hall (author)

on 23rd Jan 2014 @ 11:11:14

Hi Kilwag,

I don't imagine they will look too out of place with a decent line-height, but that is something that would need to be considered before implementing them.

0 0

Reply

Informative link text is still the safest option by Iza

on 23rd Jan 2014 @ 07:43:09

I've tried these links on an iPad, and the icon appears after you touch the link and the page is about to load, which is a little too late to make it useful. There are also accessibility issues with this approach since anything that's purely visual will be missed by those, who can't see or can't see well. Karl Groves discusses this here http://karlgroves-sandbox.com/linktype.php

I know that links can look 'boring', but as a heavy link user, I must say that nothing beats an informative link text. It's easy to scan, quick to understand and doesn't distract me from where I'm heading. :-)

1 0

Reply

Good Points by Alex Hall (author)

on 23rd Jan 2014 @ 11:03:04

Hi Iza,

Thanks for the comment, and you make a really good point about accessibility on touch screens. I can think of a couple of ways around this. Use CSS3 media queries to display the icon for mobile devices.

Or add a tooltip to them which doesn't follow the link on the first click but would show the tooltip and also slide the icon in. I'll look at some examples of this later on!

0 0

Reply

hate it when links start to download PDFs on my tablet by Lourens

on 26th Jan 2014 @ 15:37:07

Same here, just where this would be useful, on my Android tablet, I see no differnece in your approach, just a link....

0 0

Reply

Add A Comment

Please note: all comments are moderated before they are published on this page.


9pgq6b
Cancel Reply

Loading

Complete!