Add a pipe separator after items in list, not for the last item in the line - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Item

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Item

Introduction

Each item in the list below is separated by a pipe.

There is no pipe at the beginning and ending of the list.

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style class="cp-pen-styles">
.pipe-separated-list-container {<!-- w w  w.j  a  va2 s.  c om-->
   overflow-x: hidden;
}
.pipe-separated-list-container ul {
   list-style-type: none;
   position: relative;
   left: -1px;
   padding: 0;
}
.pipe-separated-list-container ul li {
   display: inline-block;
   line-height: 1;
   padding: 0 1em;
   margin-bottom: 1em;
   border-left: 1px solid;
}
p {
   margin: 1em;
}

      </style> 
   </head> 
   <body> 
      <div class="pipe-separated-list-container"> 
         <ul> 
            <li>One</li> 
            <li>Two</li> 
            <li>Three</li> 
            <li>Four</li> 
            <li>Five</li> 
            <li>Six</li> 
            <li>Seven</li> 
            <li>Eight</li> 
            <li>Nine</li> 
            <li>Ten</li> 
            <li>Eleven</li> 
            <li>Twelve</li> 
            <li>Thirteen</li> 
            <li>Fourteen</li> 
            <li>Fifteen</li> 
            <li>Sixteen</li> 
            <li>Seventeen</li> 
            <li>Eighteen</li> 
            <li>Nineteen</li> 
            <li>Twenty</li> 
            <li>Twenty One</li> 
            <li>Twenty Two</li> 
            <li>Twenty Three</li> 
            <li>Twenty Four</li> 
            <li>Twenty Five</li> 
            <li>Twenty Six</li> 
            <li>Twenty Seven</li> 
            <li>Twenty Eight</li> 
            <li>Twenty Nine</li> 
            <li>Thirty</li> 
         </ul> 
      </div>  
   </body>
</html>

Related Tutorials