title: Can I make the CSS :after pseudo element append content outside the element?
body: <p>I want to format a breadcrumb trail of links using an HTML <code>&amp;raquo;</code> entity between adjacent links, so it looks like this:</p>
  
  <blockquote>
    <p><a href="http://www.stackoverflow.com/">home</a> &raquo; <a href="http://www.stackoverflow.com/">about us</a> &raquo; <a href="http://www.stackoverflow.com/">history</a> &raquo; this page</p>
  </blockquote>
  
  <p>I've added a rule to my CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>nav#breadcrumb-trail a:after {
      content: " » ";
  }
  </code></pre>
  
  <p>but this is adding the entity INSIDE the link, instead of outside it - i.e. I'm getting this:</p>
  
  <blockquote>
    <p><a href="http://www.stackoverflow.com/">home &raquo; </a> <a href="http://www.stackoverflow.com/">about us &raquo; </a><a href="http://www.stackoverflow.com/">history &raquo; </a> this page</p>
  </blockquote>
  
  <p>Am I misunderstanding the behaviour of the CSS <code>:after</code> pseudo-element? Documentation seems to imply it adds the specified content <strong>after</strong> the specified element, rather than prepending it to the inside of the element's container. Any ideas?</p>