<div class="container">
  <p>
    List markers positioned outside the item's block box (default behavior).
  </p>
  <ul class="first">
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
  </ul>
  <p>
    List markers positioned inside the item's block box.
  </p>
  <ul class="second">
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
  </ul>
  <p>
    Marker image positioned outside the item's block box (default behavior).
  </p>
  <ul class="third">
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
  </ul>
  <p>
    Marker image positioned inside the item's block box.
  </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 {
  margin-bottom: 10px;
  background-color: #ddd;
  border: 1px dotted #aaa;
}

.first {
  list-style-position: outside;
}

.second {
  list-style-position: inside;
}

.third {
  list-style-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/list-style-position/list-style-image.png);
  /* not specifying a position defaults to outside */
}

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