Stylesheet For Better Listing Using li:before And Word-Wrap

Sometimes using default list-style-type just can't make the layout looks much better. It looks like this on one of my client's WordPress website.

The second line is wrapped below the > symbol. Using the default list-style-position: outside; won't solve the problem. The only solution is to use table display style to make it looks like a table cell and row. So using the following stylesheet and display attribute will solve the problem.

ul {
    display: table;
}
li {
    list-style-type: none;
    word-wrap: break-word;
    display: table-row;
}
li::before {
    content: "\203a";
    font-size: 12px;
    display: table-cell;
    text-align: right;
    padding: 0 10px 0 0;
}

As you can see below, the text is formatted better. 

You may notice that the bottom border line for each item are gone. It's because that the display: table-XXXX will cause browser to ignore the style on div, span or a element. The margin, padding in li stylesheet will also be ignored. It also doesn't work in IE8 and older browser.