CSS3 External Links

  | Web

I’ve added icons to external links. This is acheived using the CSS3 not() selector and the new starts-with attribute selector.


a[href]:not([href^="/"])::after {
   padding-left: 0.2em;
   content:      url(/images/globe.12.png);
}

Too bad this will not be seen by the majority of the users for at least 2 more years. (IE rant #2).

7 comments

  1. bofe

    erik,

    this isn’t probably the best approach, but this will work in all browsers with a hint of dhtml support:

    var THIS_SITE=”http://www.bastardfamily.com/“;
    var THIS_SITE2=”http://bastardfamily.com/“;

    function internal()
    {

    for (var i=0; i<=(document.links.length-1); i++)
    {
    if(document.links[i].href.indexOf(THIS_SITE)<0 && document.links[i].href.indexOf(THIS_SITE2)<0)
    {
    if(document.links[i].className != ‘footer’)
    {
    document.links[i].className = ‘external’;
    }
    }

    }
    }

    added that to my global header, an onload call to internal()

    my external CSS class:
    .external {
    padding-right: 12px;
    background-image: url(/bofester/css/aoutside.gif);
    background-repeat: no-repeat;
    background-position: right;
    white-space: nowrap;
    }

  2. Erik Arvidsson

    Of course this can be done in IE by changing the semantics of the page (the DOM) but compare that to the one css rule solution… and it works today.

    This page is going to be mostly Gecko, Opera and KHTML with fallback to plain HTML for Lynx, Netscape 4 and IE6.

  3. hzr

    Erik, it doesn’t seem to work. I think it is because Mozilla isn’t “supporting” the double colons before the ::before psuedo element yet. By using only a single colon it’ll probably work.

  4. Erik Arvidsson

    You need 1.5a or later.

  5. Erik Arvidsson

    Ooops… not done yet… The ‘::’ is the CSS3 way to do this and Moz just recently changed from using ‘:’ to ‘::’ for pseudo elements.

  6. hzr

    Ahh, had 1.4 installed. Downloaded 1.5a – looks nice =)

  7. Erik Arvidsson

    I actually changed from using ::after to using a background image because I was getting rendering artefacts in Moz :’(

Comments are closed.