Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <title>List shorthand property</title>
    <style>
      #ul-type-shorthand {
        list-style: circle inside url('list-type-image-key.PNG');
      }
      #ul-type-pos-img {
        list-style-type: square;
        list-style-position: outside;
        list-style-image: url('list-type-image-arrow.png');
      }   
    </style>
  </head>
  <body >
    <h2> In List Shorthand property, the position does not matter </h2>
    <ul id="ul-type-shorthand">
      <li>HTML</li>
      <li>CSS</li>
      <li>CSS Framework - Bootstrap</li>
      <li>PHP</li>
      <li>MySql</li>
    </ul>
    <ul id="ul-type-pos-img">
      <li>HTML</li>
      <li>CSS</li>
      <li>CSS Framework - Bootstrap</li>
      <li>PHP</li>
      <li>MySql</li>
    </ul>
  </body>
</html>
​