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

Normally you code these menus as ordered lists anyway, so it makes sense to do something like this instead:

#breadcrumb-trail ol { 
    list-style: none; 
    margin: 0;
    padding: 0; 
}

#breadcrumb-trail li { 
    display: inline; 
}

#breadcrumb-trail li:after { 
    content: ' » '; 
}

#breadcrumb-trail li:last-child:after { 
    content: none; 
}

<nav id="breadcrumb-trail">
    <h1>My Amazing Breadcrumb Menu</h1>
    <ol>
        <li><a href="">about</a></li>
        <li><a href="">fos</a></li>
    </ol>
</nav>

Answer 2

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.

Answer 3

Given the flexibility and awesomeness of CSS, it looks pretty much do-able. Tried this in current Chrome, FF, and IE and it does the job just as expected, without the need to add addtional markup:

#box {
  width: 100px;
  height: 100px;
  background: #eee;
  position: relative;
}

#box:after {
  content: '...appended text outside box';
  position: absolute;
  margin-left: 100%;
  left: 0;
  width: 200px;
}

<div id="box">
  Some Box
</div>

Small Caveat: Absolutely positioned `elements are included in the boxes' dimensions, therefore elements floating or aligned next to it are unable to dynamically respect the width of the pseudo elements' content.