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.