Using :after pseudo element after anchor element - browser differences

Question

I have an <a> element, after which I want to show a > sign, using the :after pseudo element.

The <a> element's content is dynamic, so its width changes, and sometimes the content event spans a few rows (since this <a> element is inside a <div> who's width is fixed).

I would like the >'s horizontal position to start at the end of the longest row. That is, when I give it that right:0; rule, it should be at the right most edge of the element (the vertical position doesn't matter right now):

That's the way it behaves in FF, but in Chrome and IE, the > appears at the end of the shortest row:

I'd like to understand what causes the difference between the browsers, but more importantly, I'd like all browsers to behave like FF - placing the :after at the end of the longest row. Is that possible?

I put the above code on dabblet

Answer 1

That's because your a element is set to display inline by default, and Firefox handles positioning within inline elements slightly differently to Chrome and IE.

To fix this in both Chrome and IE (whilst retaining the look in Firefox), simply give your a element an inline-block display:

a {
    position:relative;
    display:inline-block;
}

Modified Dabblet demo.