<div class="container">
  <p>The image used as a list style in the following example is the following: <img src="http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/list-style-image/list-style-image.png" alt="image used as marker"></p>
  <ul class="first-list">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
  </ul>
  <p>The image used as a list style in the following example is the following: <img src="http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/list-style-image/list-style-image-2.png" alt="image used as marker"></p>
  <ul class="second-list">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
  </ul>
</div>
body {
  color: #555;
  font-size: 1.25em;
  line-height: 1.5;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.first-list {
  list-style-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/list-style-image/list-style-image.png);
}

.second-list {
  list-style-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/list-style-image/list-style-image-2.png);
}

li {
  vertical-align: top;
}