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

Correctitude

Your a element, being a relatively positioned inline element, is the containing block for its :after pseudo-element, which is absolutely positioned. The problem is that the text in your a is multiline, and the spec says it does not define the shape or dimensions of a containing block in such a scenario. This is why you're seeing differences in browser behavior - in other words, browsers don't know what to do in such a scenario so they do whatever they think is best. – Cyndie

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.

Cornerstone

Thank you very much! However, I have 2 problems with this solution: 1) there are still browser differences in the position of the >. The Chrome positions it far more to the right that FF. 2) That means that link text is short, the > will be far away from its end. I'd like the > to be positioned right at the end of the link text... – Correctitude

@LeaCohen this appears to be caused by differences in the rendering of the text. In Firefox the "hkfjg sdfg dsfjg jsdflgj ldsfjgl" part almost fills the 200px container before going down onto a new line, however in Chrome that part is about 20px different. I'm not sure what to suggest to fix this as this is controlled by the browser (and any browser font-based settings a user may have enabled) more than the computed CSS. – Cornerstone