wikipedia leaving site image

Question

I want to make my website use the external link icon that Wikipedia uses. It is an SVG that is displayed at the end of the link using CSS I believe. The line they use for the links looks much like

<a class="linkout" href="

How do I code CSS or JS (preferably CSS) to add the image to the end. Looking thru the Wikipedia source code I have yet to figure out how they do it.

Answer 1

Just gotta follow how wikipedia does it :

http://jsfiddle.net/y89kx/

have to set a few background css styles to a certain class

HTML

<a class="external" href="someLink">External Link</a>

CSS

.external {
    background-position: center right;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent, transparent), url(image URL);
    padding-right: 13px;
}

Answer 2

In addition to @Adjit's way, another way of doing it is by adding content after using CSS3:

.linkout:after{
    height:16px;
    margin:0 0 0 5px;
    padding:0 0 0 20px; /* Width of your image */
    background-image:url(/path/to/your/file.png);
    content:" ";
}

See this JSFiddle http://jsfiddle.net/eECTc/