<code>list-style-type</code>
<br>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<br>
<code>list-style-image</code>
<br>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<br>
<code>list-style-position</code>
<br>
  <ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>  
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>  
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>  
</ul>

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>
</ul>


body {
  margin: 50px;  
}
ul{
  display: inline-block;
}
li{
  font-size: 18px;
}
ul:nth-of-type(1) {
  list-style-type: disc;
}

ul:nth-of-type(2) {
  list-style-type: circle;
}

ul:nth-of-type(3) {
  list-style-type: square;
}

ul:nth-of-type(4) {
  list-style-type: decimal;
}

ul:nth-of-type(5) {
  list-style-type: decimal-leading-zero;
}

ul:nth-of-type(6) {
  list-style-type: lower-roman;
}

ul:nth-of-type(7) {
  list-style-type: upper-roman;
}

ul:nth-of-type(8) {
  list-style-type: lower-greek;
}

ul:nth-of-type(9) {
  list-style-type: lower-latin;
}

ul:nth-of-type(10) {
  list-style-type: upper-latin;
}

ul:nth-of-type(11) {
  list-style-type: armenian;
}

ul:nth-of-type(12) {
  list-style-type: georgian;
}

ul:nth-of-type(13) {
  list-style-type: lower-alpha;
}

ul:nth-of-type(14) {
  list-style-type: upper-alpha;
}

ul:nth-of-type(15) {
  list-style-image: url(//goo.gl/L3tqpe);
}
ul:nth-of-type(16) {
  list-style-position: inside;
}

ul:nth-of-type(17) {
  list-style-position: outside;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js