CSS: breadcrumb separators with generated content

Every time we have to define our breadcrumb separators with CSS we always stumble on the same problem: separators must be proportional to the text of each item. Borders don't work, because they're always taller than expected so a possible choice is to use background images. However, if breadcrumbs are inline, we could experience some problems with horizontal spacing. A good, modern solution is to use generated content to create such separators, which is the same thing as inserting raw characters within the markup. This solution, instead, is a lot neater:

ul > li:after {
    content: '\3E';
    margin-left: 0.3em;

ul > li:last-child:after, 
ul > li:first-child:after {
    content: normal;

You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.