External link icons the CSS way
A few days ago, Mark Pilgrim wrote up some details on how to automatically
insert an image before off-site links, using Movable Type macros. I
don’t like doing it that way; it’s possible with pure CSS (assuming you
have a browser that supports CSS3 selectors — this means Mozilla, in
case you hadn’t guessed). If you are using Mozilla, you’ll see a little world icon (
) after each external link. Read on for a description of how the technique works.
Mark’s method works by using MT macros to assign a class of “offsite”
to off site links, and then styling those links accordingly. Using CSS3
selectors, we can style off-site links directly without having to assign
them a class or run any server-side code. Here’s the code to do it, and
then we’ll discuss how it works.
/* Add an external-link icon to absolute links */
div.blogbody a[href^="http:"] {
background: url(/images/remote.gif) right center no-repeat;
padding-right: 12px;
}
div.blogbody a[href^="http:"]:hover {
background: url(/images/remote_a.gif) right center no-repeat;
}
/* ...but not to absolute links in this domain... */
div.blogbody a[href^="http://www.kryogenix.org"] {
background: transparent;
padding-right: 0px;
}
div.blogbody a[href^="http://www.kryogenix.org"]:hover {
background: transparent;
}
/* ...or to the "google for $postTitle" link for each entry */
div.blogbody a[href^="http:"].googlelink {
background: transparent;
padding-right: 0px;
}
div.blogbody a[href^="http:"].googlelink:hover {
background: transparent;
}
This all works by using the CSS3 “starts-with” selector,
^=, on attributes. Where we have a selector
a[href^="http:"], that means “select all a
tags where the href attribute starts
with the string http:“. This will select all
absolute links, i.e., those that are not given as a link relative to
where the current page is. That’s our first selector: it says “add this
background image and a bit of right padding to all absolute links”.
(Note that the technique of adding a little bit of padding and then
putting an icon inside that padding as a background image, to make it look as though the icon is part of the flow of the page, is one that I got from Eric Meyer on CSS.)
(Ignore the second rule for the moment.)
Now, all outside links are absolute links (because they’re not on the
same server as the current page), but some internal site links may also
be absolute (for instance, permalinks often are). So our third rule
removes the background and padding we applied above for absolute links
that point to my domain. (You’ll have to customise this bit for your own
domain.)
Ignoring the fourth rule for a little bit, the fifth rule does the
same as the third rule, for absolute links with class “googlelink”. This
is because posts here have a “search Google for the post title” link,
which is itself a small icon; it looks a bit daft to have a small
representative icon (the magnifying glass) followed up by another small
icon! So this suppresses the “external link” indicator for that particular link (which is defined as class “googlelink” in the MT templates).
Note that flashy people could have defined the third and fifth rules
as one rule, because you can add multiple selectors on a rule; this
should work:
div.blogbody a[href^="http://www.kryogenix.org"], div.blogbody a[href^="http:"].googlelink {
etc etc etc
}
but I wanted to take my time over this, because CSS3 selectors aren’t
all that widely supported.
What about those rules that we ignored, the second, fourth, and
sixth? Well, they apply to the absolute external links in exactly the
same way as rules 1, 3, and 5, but they add the pseudo-class
:hover. So when you mouseover one of our external
links, these new styles apply. All this does is switch in a new version
of the background image (in this case, an animated spinning version of the world image).
The images come from Matterform’s excellent QBullets
collection.
So, there you have it. Fortunately, Internet Explorer, which doesn’t
support CSS3 selectors, doesn’t partially apply them or anything; our
selectors above just don’t match anything and hence the view in IE is
unchanged (you just don’t get the neat icons).
For those of you who are Mozillaless and remain unclear on what this
should all look like, here’s a screenshot. See how the “Show, Don’t
Sell” link, which is external, has the icon, whereas the “more detailed
writeup” link, which is a link to somewhere else on kryogenix.org, does
not.
I dont know if its possible to enter whole html code in the content: “bla“; attribute.
But if its possible you could use the :after pseudo-class to insert a img tag with an alt text or whatever. But i dunno if its posible! :D
16 minutes later
Great idea! I modified your idea. For my a tags I added a class=“external“. In my stylesheet, I added this:
.external {
background: url(/images/externallink.gif) right center no-repeat;
padding-right: 12px;
}
This works across current versions of IE6, NN7, Opera7, and Mozilla. Any idea how I can get alt text to appear for each little globe saying “external link” since this is implemented through the stylesheet?
16 minutes later
Cool stuff. But I don’t see these icons in Mozilla 1.4Do I have to change some settings or what? Please help.
16 minutes later
Great article. I think it would be a little more inviting if you formatted the code with line breaks:div.blogbody a[href^=“http:“] { background: url(/images/remote.gif) right center no-repeat;padding-right: 12px;}Just a thought
16 minutes later
Just as an addendum to this article - I’ve put together a script to made css3 :hover effects work in ie6.
http://blue.ripcord.co.nz/~ben/css3/
Ben
68 weeks later
Ben: the script appears to be under something of a restrictive licence, but the link to the licencing page is dead.
68 weeks later
Arleen,
I do not think that you have to worry about Alt text for the background-image. The Alt text is needed for screen reader, but since the image does not actually appear on the page, it will not trip up the screen reader.
68 weeks later
Josh,
the alt text would be of use not only for screen readers but also to ‘normal’ users who may be wondering about what the icon signifies.
On mouseover, the alt text would conveniently provide this addtl bit of info.
Con: yet more images can clutter the screen if a page is full of external links. What I would like better instead: insert a title to the a-tag.
Anyone know if that’s possible?
76 weeks later
Josh,
the alt text would be of use not only for screen readers but also to ‘normal’ users who may be wondering about what the icon signifies.
On mouseover, the alt text would conveniently provide this addtl bit of info.
Con: yet more images can clutter the screen if a page is full of external links. What I would like better instead: insert a title to the a-tag.
Anyone know if that’s possible?
76 weeks later
great site
80 weeks later
anyone know how can open links from iframe in a new window?
81 weeks later
is it only me or is this article really unreadable?!
84 weeks later
I found it really interesting, thanks.
85 weeks later
87 weeks later
87 weeks later
The font is too small, I can hardly read.
87 weeks later
Josh,
it’s a good idea, a good solution.
Jos
91 weeks later
very good solution
92 weeks later
hi
93 weeks later
Livecam says: livecam
103 weeks later
I have FireFox (Mozilla 1.7.3) and I can’t see this stuff.
I agree this page could be much better formatted and I wish these porn-users would stay away from useful technical sites…
112 weeks later
shouldn’t this be done by adding content, instead of using background images (this still leaves the oppertunity to use other backgrounds on all links
a[href^="http://"]:after { content: ' ' url('yourimage.gif'); }119 weeks later
Rikkert: yep, but generated content isn’t very well supported. Moreover, if you do it with generated content then the icon isn’t actually part of the link, and clicking it won’t do anything, which is a bit weird and counterintuitive. This won’t be fixed until generated content can contain HTML.
119 weeks later
erm, that’s not correct, generated content is supported by all browsers (that i’ve seen; please tell me the ones who do not) that support the above selector construct.
Furthermore, generated content is in fact part of the link and will perform action when clicked. (::before and :: after are generated within the element).
I used this on my own site as well: http://www.rikkertkoppes.com/thoughts/2004/10/27#U20041215
119 weeks later
very nice trick. It also works well on most links of my site. but i have some links wich go over a internal counter-script to external pages
for example:
http://www.MyDomain.net/path/go.php?http://www.OtherDomain.com/path
i tried to use parts of the syntax of the forward counter-uri with rule 1,
[href^=“http://www.MyDomain.net/path/go.php?http:“]
but it doesn’t work for this special case of “external” link…
any idea??
124 weeks later
hi,
i tried for about one hour and found a solution. the solution is simple, but a little bit strange. it depends on, at which postion you right the rule.
if I write:
[href^=“http://www.MyDomain.net/path/go.php?http:“]
and then…
a[href=“http://www.MyDomain.net“], a[href=“http://www.MyDomain.net“]
the second rules delete the frist rule
but if I write:
a[href=“http://www.MyDomain.net“], a[href=“http://www.MyDomain.net“]
and then special rule…
a[href^=“http://www.MyDomain.net/path/go.php?http://“
…it works
tzzz ;-))
124 weeks later
Martin: very true. This is because if you put the shorter rule second, then the URL in your page matches both rules, and then the second rule applies, overriding the first.
124 weeks later
thanks for the tips on this thread.. used em on my site – http://www.ekstrak.co.uk took a bit of fiddling but i got there in ther end.
128 weeks later
I bequeath to the author a generous set of *
* tags in order to break up this fine article into something more readable.
Your tutorial is very useful – please consider formatting it in a readable fashion. =)
134 weeks later
Bah – one more time – P tags would help with the readability of an otherwise impressive article.
134 weeks later
EyePulp: I’ll fix it at some point. That they’re not there is for historical reasons…
134 weeks later
Ahhhh….fixed.
137 weeks later
cool!!
there’s eny way of makint that imges are not affected by this?!รง
i dont want enternal icons on images that have links… is there eny way of making this?!
138 weeks later
what if i use sometimes images instead of text links? (![]()
). any workarounds apart from using a CSS-class?
Please mail me
145 weeks later
hi
152 weeks later
There is a problem with this implementation: If the link wraps two lines or more, the image is not positionen correctly. Any idears on how to fix this?
155 weeks later