List bullet image example

HTML

<h3>Using a list-style-image</h3>
<ul class="basic">
  <li class="basic">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 class="hello">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;
}

.hello {
  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;
}