Bullets different color

by AntowaKartowa

HTML

<ul>
    <li>foo</li>
    <li>bar</li>
</ul>
<br />
<ol>
    <li>foo</li>
    <li>bar</li>
</ol>

CSS

ol, ul {
    padding-left: 15px;
}

li {
    list-style: none;
}

ul li:before {
    /* For a round bullet */
    content:'\2022';
    /* For a square bullet */
    /*content:'\25A0';*/
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -10px;
    top: -0px;
    color: orange;
    font-size: 20px;
}

ol {
    counter-reset:li; /* Initiate a counter */
}

ol li:before {
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -15px;
    top: -0px;
    color: red;
    
    content:counter(li)'.'; /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
}