blog.philcrissman.com

I noted some peculiarities with CSS pseudo-elements implementation between Firefox and Safari today. IE does not support them, so it’s basically meaningless to bring it into the discussion.

I used a CSS rule to add an “external link” icon, most famously from Wikipedia. It looks a bit like a:after { content: url( images/external_link.gif; }. Pretty neat, but this adds the icon to every link on the page, including titles, tags, menu items… not precisely what I wanted. So I followed it with some rules that looked a bit like:

.some-class a:after { content: url(); }

Made sense to me; I assumed this would override the first rule in the given class of elements, and those links would not be followed by the external link icon.

Yes and no.

Firefox liked my override just fine. Safari, however, ignored it. Hm. So I tried

.some-class a:after { content: none; }

That must be better. Let’s check. ... Nope; Firefox is still okay with it, but Safari is unfazed, showing off the little icons after every single link on the page.

So I tried again:

.some-class a:after { content: ""; }

Just an empty string. Sure enough, that did it. Safari likes me again, and Firefox is okay with this rule as well. It is quite possible that the last rule is really the Proper Way To Do It, and Firefox was just being easy. Possible. But regardless, if you’re trying to do something similar, that last rule may be helpful.