External Link Indicators
By |
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: