:after pseudo not taking direction (rtl) in consideration? (Firefox)

Question

I have this css to put an icon after each external link:

a[target="_blank"]:after {
    background: url("images/external_icon.png") 0 0 no-repeat;
    border: 0 none;
    content: "";
    padding: 0 14px 0 0;
}

If I would to change to :before instead, the icon will appear in front of the link instead. So far, so good.

But in my right-to-left version of the site, while using direction: rtl;, the icon still appears to the right of the element, instead of being "flipped" to the other side. Changing to a :before will still make the icon appear to the right of the element.

Is this a known FF bug? Is there any other solution? (Works fine in Chrome)

Answer 1

Ok, so I found a solution. Make it inline-block instead.

display: inline-block;
height: 13px;
width: 13px;

Simple solution, but getting there isn't aslways as easy.

I still feel like the css from the question might be a browser bug?

Answer 2

The Firefox behavior seems to be correct: the rendering of the :after should be the same as the rendering of an empty span with those styles inserted at the end of the a[target="_blank"]. If you try that, you get identical behavior in Chrome and Firefox, and it matches the Firefox behavior for :after.

You may want to file a WebKit bug, though.