Richard Parnaby-King

Web Developer – PHP, Zend Framework and Actionscript 3

Posted on | | 1 Comment

Some websites with external links have a small image or icon to indicate that the link will lead them to an external webpage. Here is a simple CSS trick to show an html entity indicating an external link:


[html]

External Link
[/html]
[css]
/*css*/
a[target=”_blank”]:after {
content: “\29C9”;
color: #666666;
font: 1em/1.5em Ariel;
height: 1.3em;
margin: 0 0 0 5px;
outline: 1px solid #999999;
padding: 1px;
text-align: center;
width: 1.3em;
}
[/css]
The HTML entity “\29C9” are two overlapping boxes. It seems apt to have this as an image indicating the link will open a second window. Other than content, height and width, the other CSS rules can be ignored.

Preview:

An alternative is to use an image. This is just as simple. Replace the html entity from the content rule and replace it with a url that resolves to your selected image:

[css]
/*css*/
a[target=”_blank”]:after {
content: url(“/path/to/image.png”);
margin: 0 0 0 5px;
}
[/css]

In the above CSS I have included a little margin to the left of the image. This is to stop it bunching right up against the text.

Alternativly, you can base64 encode your image and supply that as the url parameter (in this case we shall use that iconic new window image from wikipedia):
[css]
/*css*/
a[target=”_blank”]:after {
content: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=”);
margin: 0 0 0 5px;
}
[/css]
Preview:

Conclusion

This is a simple bit of CSS that creates a very cool effect. If you wanted to, you can even alter the selector to be sensitive to an arbitrary attribute (for example the href attribute of a link), such that a link of [html]Link to File[/html] and CSS selector of [css]a[href$=”.pdf”]:after[/css] you can place a small pdf icon at the end of .pdf links. The same can be done for word .doc files, and so on. For Example:

Happy coding =)

Category: CSS, HTML

Posted By:

Comments

  • ABOUT

    Having fifteen years of programming experience in PHP, Zend Framework and ActionScript3, I have a very strong working knowledge of object orientated programming.

    I am a PC Gamer! Playing FPS, RTS, RPG and the occasional MMO since 1996 I have a huge number of a variety of fast-paced games.

  • Recent Posts

  • Categories

  • RSS SUBSCRIBE TO OUR FEED