Can I make the CSS :after pseudo element append content outside the element?

Question

I want to format a breadcrumb trail of links using an HTML » entity between adjacent links, so it looks like this:

home »

Answer 1

The spec says:

As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.

Note the key phrase at the end of this sentence, which refers to the inner content (or inner text). So, the pseudo-elements are inserted into the beginning of the end within the specified elements' content. Therefore the right double angled quote is being inserted after the text of your hyperlinks, rather than after the hyperlinks.

Here's a visual representation of the tree of the DOM element for one such link with both pseudo-elements:

a
  a:before
  content
  a:after

I guess one workaround to this behavior, is to wrap each link in a span then apply styles to nav#breadcrumb-trail span:after, but that'd result in unnecessary markup... worth a shot in any regard though.