Edit

List Style Position

The CSS list-style-position property is used to represents the position of the list-item markers. There two further types of list-style-position property. 

1. Outside: means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically:
2. Inside: means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Example of Code

<style type="text/css">
  .example-io {
    font-size: 1.5em;
  }
  .example-inside {
    list-style-position: inside;
  }
  .example-outside {
    list-style-position: outside;
  }
</style>
<body>
    <ul class="example-inside example-io">
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
    <ul class="example-outside">
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
</body>

Output

   
         
  • List item one
  •      
  • List item two
  •      
  • List item three
  •    
   
         
  • List item one
  •      
  • List item two
  •      
  • List item three
  •