Custom colored bullets

HTML

<div class="side-bar">
    
    <ul>
        <li><a href="#">Foo</a></li>
        <li><a href="#">Bar</a></li>
        <li><a href="#">Lorem ipsum dolor</a></li>
    </ul>
    
</div>

CSS

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}