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.