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 » about us » history » this page

I've added a rule to my CSS:

nav#breadcrumb-trail a:after {
    content: " » ";
}

but this is adding the entity INSIDE the link, instead of outside it - i.e. I'm getting this:

home » about us » history » this page

Am I misunderstanding the behaviour of the CSS :after pseudo-element? Documentation seems to imply it adds the specified content after the specified element, rather than prepending it to the inside of the element's container. Any ideas?

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.