title: How to Add Separators after List items In CSS
body: <p>I am trying to create a List items and adding separators between them i tried everything but problems remains there. here is the image i want my list menu look like :-</p>
  
  <p><img src="https://i.stack.imgur.com/pXoHn.png" alt="enter image description here"></p>
  
  <p>the css and html code i am using is this :-</p>
  
  <p><strong>HTML :-</strong></p>
  
  <pre><code>&lt;p class="Categories"&gt;Categories&lt;/p&gt;
  &lt;div class="Rectangle"&gt;&lt;/div&gt;
  &lt;div class="Categories_Box box1 box2"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" class=""&gt;Today&lt;/a&gt;&lt;/li&gt;
  &lt;div class="line1"&gt;&lt;/div&gt;
  &lt;li&gt;&lt;a href="#" class="yest"&gt;Yesterday&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="this_week"&gt;This Week&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="last_week"&gt;Last Week&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="last_month"&gt;Last Month&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS :-</strong></p>
  
  <pre><code>   .Categories {
    font-size: 29px;
    font-family: "Exo";
    color: rgb(237, 106, 61);
    font-weight: bold;
    line-height: 0.869;
    position: absolute;
    left: 227.937px;
    top: 215px;
    z-index: 31;
  }
  
  .Rectangle {
    background-color: rgb(107, 107, 107);
    position: absolute;
    left: 231px;
    top: 281px;
    width: 194px;
    height: 5px;
    z-index: 29;
  }
  
  
  .Categories_Box ul{
   position:absolute;
   left: 0px;
   top: 0px;
   width: 1366px;
   height: 768px;
   z-index: 43;
   list-style:none;
  
  }
  
  
  .yest, .this_week, .last_week, .last_month {
    font-size: 21px;
    font-family: "Exo";
    text-decoration:none;
    color: rgb(107, 107, 107);
    font-weight: bold;
    line-height: 0.86;
    -moz-transform: matrix( 0.76907888849934,0,0,0.58955579248353,0,0);
    -webkit-transform: matrix( 0.76907888849934,0,0,0.58955579248353,0,0);
    -ms-transform: matrix( 0.76907888849934,0,0,0.58955579248353,0,0);
    position:relative;
    left: -175px;
    top: -641.112px;
    z-index: 30;
  }
  
  .line1 {
    font-size: 10px;
    font-family: "Arial";
    color: rgb(221, 221, 221);
    line-height: 4.2;
    position: absolute;
    left: 345.85px;
    top: 684.418px;
    z-index: 100;
  }
  
  
  .box2 {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(217, 217, 217);
    border-radius: 5px;
    background-color: rgb(242, 242, 242);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.36);
    position: absolute;
    left: 219px;
    top: 229px;
    width: 228px;
    height: 498px;
    z-index: 27;
  }
  
  
  .box1 {
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    left: 221px;
    top: 230px;
    width: 225px;
    height: 498px;
    z-index: 28;
  }
  </code></pre>
  
  <p>after editing this code my top 20 list got vanish also i can't even see menu items. 
  please help me </p>