List bullet image example

ul bullets

by ian_smithz

HTML

<h3>Using a list-style-image</h3>
<ul class="basic">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
</ul> 

<h3>Using a Background Image on li</h3>
<ul class="bg-img">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
</ul>

CSS

ul.basic {
    list-style: none;
    list-style-image: url(http://placehold.it/20x20);
    margin: 0 0 0 0;
}
ul.basic li {
    margin: 1.00em 0 0 0;
    padding: 0 0 0 0;
}

ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/20x5);
    background-repeat: no-repeat; 
    background-position: left center;
    margin: 1.00em 0 0 -30px;
    padding: 0 0 0 30px;
}