problems with link icons

by Brenton Strine

HTML

<p>Hello, <a rel="external" href="http://google.com">a link that's external</a>, e.g. linking offsite.</p>
<p>Hello, <a href="http://google.com"class="file">a link to a file</a>, e.g. download.</p>
<p>Hello, <a rel="external" href="http://google.com"class="file">a link that's both</a>, e.g. external and download.</p>

<p>Hello, <a rel="external" href="http://google.com" class="file">this is a link that's both external and to a file</a>, and furthermore, it's long enough that it will wrap to another line. This causes a weird bug in some browsers until you mess with the CSS, then it just fixes itself.</a></p>

CSS

[rel=external],
.file { margin-right: .7em; position: relative;}

[rel=external].file { margin-right: 1.4em;}

[rel=external]:after {
    content: "A";
    text-decoration: none;
    margin: 0;
    padding: 0;
    position: absolute;
    color: red;
}

.file:after {
	content: "B";
    text-decoration: none;
    margin: 0;
    padding: 0;
    position: absolute;
    margin-right: -1em;
    color: red;
}

[rel=external].file:before {
    content: "A";
    text-decoration: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -1.4em;
    bottom: 0;
     color: lightgreen;
}