Custom list-style-type styling using spans

Uses jQuery to wrap <li> contents in a span so that list item markers (bullets, etc) can be styled independently of list item content.

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 {
    color: red;
    list-style-type: disc;
    margin-left: 3em;
}

ul li span {
    color: #333;
}

ol {
    color: orange;
    list-style-type: decimal;
    margin-left: 3em;
}

ol li span {
    color: #333;
}

JavaScript

$(document).ready(function() {
    $('ul, ol').children('li').each(function(i, item) {
         $(item).wrapInner('<span>test</span>');
    });
});