WP-Mix

Quick snippet for replacing default list-style types (bullets, discs, squares, etc.) with custom generated content in CSS.

Step 1: HTML

Here is the HTML code:

<!-- short list items -->
<ul>
	<li>Lorem ipsum dolor sit amet, consectetur</li>
	<li>Cras eu orci et nulla accumsan facilisis</li>
	<li>Donec ut tellus ac erat pulvinar pretium</li>
</ul>
<!-- long list items -->
<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu orci et nulla accumsan facilisis. Donec ut tellus ac erat pulvinar pretium quis quis odio.</li>
	<li>Donec ut tellus ac erat pulvinar pretium quis quis odio. Nullam et erat ac eros pulvinar placerat. Pellentesque sed porttitor sem sed porttitor sem.</li>
	<li>Fusce eu malesuada lacus. Proin fringilla, odio non dictum volutpat, neque ligula hendrerit arcu, in varius urna arcu in orci. Vestibulum eget ante arcu.</li>
</ul>

Step 2: CSS

Here is the CSS code:

.entry ul {
	margin-left: 0; padding-left: 24px;
	list-style: none; text-indent: -12px;
	}
.entry ul li:before {
	content: "\00BB\0020";
	}

These styles basically replace the default CSS list-style with the custom generated-content of your choice. In this example, the generated content is \00BB\0020, which produces a right-angle bracket » followed by a blank space.

Of course, much more is possible, check out the official docs to go deep on generated content, or convert some character entities. Also: you can check browser support.