Custom list-style-type styling using :before and content

Uses the :before pseudo-selector and the content property to allow custom list markers and styling.

HTML

<h4>An unordered list</h4>

<ul>
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
</ul>

<h4>An ordered list</h4>

<ol>
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
</ol>

CSS

body {
    font-family: Futura, sans-serif;
}

h4 {
    font-size: 24px;
    margin: 1em 0;
}

ul, ol {
    list-style-type: none;
}

ul {
    color: red;
}

ul li:before {
    color: purple;
    content: "• ";
}

ol {
    color: orange;
}

ol li:before {
    color: blue;
    content: "\f060 ";
}