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

css, css-selectors, html, pseudo-element

Solution

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>

Problem

I want to format a breadcrumb trail of links using an HTML `&raquo;` 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?

Original source