Style External Links with CSS.

Lately I’ve been working on a new project that has more links than I could ever imagine in a website. So the first thing that troubled me was to find a way to categorise some of these links. The whole project is based on ExpressionEngine so at first I tried creating categories and custom fields for each link but pretty soon this solution became useless.

So my best friend: Google, found me something even better based on some CSS magic! Maybe you’ll find it useful as well…

/* long version */
a[href^="http://"]:not([href*="mysite.com"]),
a[href^="https://"]:not([href*="mysite.com"]), 
a[href^="//"]:not([href*="mysite.com"]), {

}
/* shorter version! */
a[href*="//"]:not([href*="mysite.com"]) {
    /* external link styles, use :before or :after if you want! */
}

/* long version */

a[href^="http://"]:not([href*="mysite.com"]),

a[href^="https://"]:not([href*="mysite.com"]),

a[href^="//"]:not([href*="mysite.com"]), {

}

/* shorter version! */

a[href*="//"]:not([href*="mysite.com"]) {

/* external link styles, use :before or :after if you want! */

}

The above solution is meant for styling external links but with a bit of customisation, you can style pretty much any kind of link. At least I did!

[ source ]

Style External Links with CSS.

Posted on February 17, 2014 in Web Development

No responses yet. Wanna start?