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>