External Link Indicators
By Timothy Foster
rating: 0+x

Displays a little symbol after an external link indicating to what kind of document it leads to.

Import

To use this CSSnippet and ensure you are always using the latest version, paste the following code into your site's CSS:

@import url('http://css.wikidot.com/cssnippet:external-link-indicators/code_');

Description

This CSSnippet is especially useful for distinguishing between file types, thus providing viewers with some knowledge of what kind of file is behind the link.

Designed for the Standard Template.

Code

main > .content a[href^=http]::after,
main > .content a[href^='/local--files/']::after{
    font-family: 'FontAwesome';
    font-size: 65%;
    content: '';
    text-decoration: none;
    display: inline-block;
    position: relative;
    left: 2px;
    bottom: 3px;
    margin-right: .25em;
}
main > .content a[href^=http]:hover::after{  text-decoration: none; }
 
/* * File Types * */
main > .content a[href$='.png']::after,
main > .content a[href$='.jpg']::after,
main > .content a[href$='.gif']::after,
main > .content a[href$='.bmp']::after,
main > .content a[href$='.svg']::after{
    content: '';
}
main > .content a[href$='.mp3']::after,
main > .content a[href$='.midi']::after,
main > .content a[href$='.wav']::after{
    content: '';
}
main > .content a[href$='.zip']::after,
main > .content a[href$='.rar']::after,
main > .content a[href$='.tar']::after,
main > .content a[href$='.7z']::after{
    content: '';
}
main > .content a[href$='.h']::after,
main > .content a[href$='.cpp']::after,
main > .content a[href$='.as']::after,
main > .content a[href$='.css']::after,
main > .content a[href$='.txt']::after,
main > .content a[href$='.js']::after,
main > .content a[href$='.java']::after,
main > .content a[href$='.html']::after,
main > .content a[href$='.xml']::after{
    content: '';
}
main > .content a[href$='.doc']::after,
main > .content a[href$='.docx']::after,
main > .content a[href$='.pdf']::after{
    content: '';
}
main > .content a[href$='.fla']::after,
main > .content a[href$='.ppt']::after,
main > .content a[href$='.pptx']::after{
    content: '';
}
main > .content a[href$='.xls']::after,
main > .content a[href$='.xlsx']::after{
    content: '';
}
main > .content a[href$='.mpg']::after,
main > .content a[href$='.mov']::after,
main > .content a[href$='.avi']::after,
main > .content a[href$='.swf']::after{
    content: '';
}
main > .content a[href$='.ttf']::after,
main > .content a[href$='.woff']::after,
main > .content a[href$='.eot']::after,
main > .content a[href$='.otf']::after{
    content: '';
}
 
main > .content .no-external a[href^=http]::after,
main > .content .no-external a[href^='/local--files/']::after{  display: none; }
 
main > .content .printuser a::after{  display: none !important; }

In Practice

To see this in action, visit:

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License