Styling a list as a comma separated string

The requirement was to create a history trail of visited pages in a SharePoint Enterprise wiki. The result will look like this:

Your trail: Page1, Page2, Page3

The HTML:

<div class="historyTrail">
    <div class="historyListHeading">Your trail: </div>
    <ul id="historyTrailList">
        <li>Page1</li>
        <li>Page2</li>
        <li>Page3</li>
    </ul>
</div>

The CSS:

.historyTrail
{
    display: block;
    margin-bottom: 20px;
}
.historyListHeading 
{
    display: inline;
}
.historyTrailList
{
    display: inline;
    list-style: none;
    margin-left: -30px;
}
.historyTrailList li
{
    display: inline;
}
.historyTrailList li + li:before {
    content: ", ";
}

Easy as that!