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…
1 2 3 4 5 6 7 8 9 10 |
/* 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 ]
No responses yet. Wanna start?