<div class="container">
  <p>
    Circle style list markers positioned outside the item's block box. An image of a circle with an arrow is used. If it is not available for any reason, the browser will just fall back to the regular circle style.
  </p>
  <ul class="first">
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
  </ul>
  <p>
    Square list markers positioned inside the item's block box. No image is set.
  </p>
  <ul class="second">
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
  </ul>
  <p>
    <code>list-style</code> is set to none. No marker is displayed.
  </p>
  <ul class="third">
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
  </ul>
  <p>
    <code>lower-roman</code> style type is specified. Markers positioned outside the list items' block box. An image is specified but the url() specifies the location of an image that is not available, so the lower-roman markers are applied instead of the image.
  </p>
  <ul class="fourth">
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
  </ul>
</div>
body {
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

li {
  vertical-align: top;
}

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

.second {
  list-style: square inside;
}

.third {
  list-style: none;
}

.fourth {
  list-style: lower-roman outside url(http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/list-style/not-available.png);
}