title: Using :after pseudo element after anchor element - browser differences
body: <p>I have an <code>&lt;a&gt;</code> element, after which I want to show a <code>&gt;</code> sign, using the <code>:after</code> pseudo element.  </p>
  
  <p>The <code>&lt;a&gt;</code> element's content is dynamic, so its width changes, and sometimes the content event spans a few rows (since this <code>&lt;a&gt;</code> element is inside a <code>&lt;div&gt;</code> who's width is fixed).</p>
  
  <p>I would like the <code>&gt;</code>'s horizontal position to start at the end of the longest row. That is, when I give it that <code>right:0;</code> rule, it should be at the right most edge of the element (the vertical position doesn't matter right now):</p>
  
  <p><img src="https://i.stack.imgur.com/1UC5O.png" alt="enter image description here"></p>
  
  <p>That's the way it behaves in FF, but in Chrome and IE, the <code>&gt;</code> appears at the end of the shortest row:</p>
  
  <p><img src="https://i.stack.imgur.com/o047X.png" alt="enter image description here"></p>
  
  <p>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 <code>:after</code> at the end of the longest row. Is that possible?</p>
  
  <p>I put <a href="http://dabblet.com/gist/7211138" rel="nofollow noreferrer">the above code</a> on dabblet</p>