Visual External Link with CSS
This is a simple snippet to show the end user a visual example of when they are clicking on an external link from your website. It uses the :after pseudo class to show an image that represents an external link.
Lets look at the following HTML code:
<ul>
<li><a href="#">CSS Portal</a></li>
<li><a href="#" class="external">Google</a></li>
<li><a href="#" class="external">Bing</a></li>
<li><a href="#">CSS Portal Blog</a></li>
<li><a href="#">CSS Portal Properties</a></li>
</ul>
The above code represents 5 potential links, here we have two links that point to an external page, they are: Google and Bing. To each of these links, we have added an external class which will display an image for an external link.
The following CSS code is used to style our links:
.external:after {
content:url(external.png);
margin-left:5px;
vertical-align:middle;
}
A break down of the CSS is:
content – Here we place the location for our external link with the content property.
margin-left – As we don’t want the image touching our link, we add a margin of 5px to the left of the image.
vertical-align – This property will vertically align the image to the middle.
That’s it for this snippet, we hope you’ll find it useful for your websites.
With thanks to Icon Finder for the image. As can be seen (hopefully), there is an image to the right of this link to represent an external link.
