Aug 21 2015 0

Styling external links

To add a visual indication to links that are external’ and take you away from my blog, have I added to the right-hand side of the link.

The icon is part Font-Awesome1 and the following piece of CSS code makes sure it gets added to all of the links that are using the target attribute. 1

/* Styling of external links */
a[target=_blank] {
    margin-right: 1em;

a[target=_blank]:after {
    position: absolute;
    font-family: FontAwesome;
    font-size: 0.8em;
    color: rgb(128, 137, 146);
    text-shadow: 1px 1px 1px silver;
    margin-left: 0.2em;
    content:" \F0C1";
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
    background-image: none;

This requires you to turn on the App External links’ (under General) within the dashboard of your blog. [External links][img]

  1. [img]: /public/blot-general.png↩︎

Previous post
Changing the styling of my blog On this page I document the changes I have made to the template (based on the template ‘Default’) I am using for my blog. Added Font-awesome Added
Next post
Migration complete All of the post previously hosted on have now been migrated to, except for the posts that were related to styling of the blog
This blog is powered by Blot