Exit

At Whitespace external links in an entrie can be recognized by a little graphic added at the end of the text link. A little arrow pointing out of the site - at least that is the impression I get. When I first saw this feature I really liked it and ensured myself I would do the same for my site.

I thought he had it done with classes so I took a look at his site source to get an idea of how it was done. To my surprise no classes where used. Maybe some javascript?

It never really occured to that the soution lies in his CSS. So I spent a couple of days searching for a solution without any results. Now I could hit myself for not looking at his CSS first.

Below is the CSS I used to create a similar effect. I do have to add that the effect - that I know of - can not be seen with Internet Explorer. If you can see the following exit sign behind an external link you are in luck. Consider it as an extra feature.

a[href]:not([href*="sken.be"]) {
        padding-right: 12px;
        background: url(../images/exit.gif) no-repeat center right;
}

For those wondering what a[href]:not([href*="sken.be"]) is all about, some explenations. The :not is a pseudo class, here used to define that the following properties apply to all anchors that do not have the following href*="sken.be" propertie. href*="sken.be" defines all anchors that contain (*) 'sken.be' in the href. The first [href] is needed to define that the properties only apply to anchors with a stated href. I have some name anchors on my page that also would have the exit image if I hadn't added this code.

I know it sounds a bit difficult, but I had some trouble explaining it. I'll recap what the code does for my site. It makes sure the exit sign is only shown behind links that do not contain 'sken.be'. Or simply external links. I hope it is of some good for you.

14 januari 2004

css, Design, Deze Site, English, Projecten, Web

back to top