Creating breadcrumbs separators with CSS generated content and jQuery

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.

For browsers that support generated content we can write the following:

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

li.last:after, li:first-child:after {
    content: none;
}

Unfortunately, IE 7 and 6 don't support generated content so we have to use a jQuery fallback:

$(function () {
    var browser = navigator.userAgent,
        browserVer = navigator.appVersion,
        items = $('li', '#breadcrumbs').eq(0).nextUntil('li.last');
    if (/msie/g.test(browser.toLowerCase()) && parseInt(browserVer) < 8) {
        items.each(function () {
            var $item = $(this);
            var sep = $('<span class="separator"/>');
            sep.html('&gt;').insertAfter($item);
        });

    }
});

[view-example url="http://jsfiddle.net/gabrieleromanato/kFyqP/"]