html - Use CSS to get a seperator on the last item in a menu -

i trying display | seperator within list menu each list item except last one, dynamically generated using yii component i'd need via css.

i tried using snippet had no joy:

#mainmenu li:last-child:after {   content: "|"; }; } 

i want shows seperator this:

home | | | contact 

here html code, please note using skeleton css framework 1.1 (legacy know).

<nav class="action-bar row">     <div>         <ul id="mainmenu" class="container menu">             <li class="home active first"><a href="/">home</a></li>             <li><a href="/about">about us</a></li>             <li><a href="/whatwedo">what do</a></li>             <li class="last">                 <a href="/contact">contact us</a>             </li>         </ul>     </div> </nav> 

my css:

#mainmenu {  height: 17px;  border-bottom: 1px dotted #acbbcb;  padding-top: 5px; }  .header .action-bar {  font-weight: normal;  font-size: 13px;  overflow: hidden;  padding: 0px; }  .header .action-bar.buddy-padding {  margin-bottom: 0; }  .header .action-bar .menu {  margin: 0 auto; }  .header .action-bar .menu li {  display:inline-block;  line-height: normal;  padding-right: 7px; }  .header .action-bar .menu li {  text-decoration: none;  color: #000;  display: block; }  .header .action-bar .menu li.active {  text-decoration: underline; } 

here's way:

#mainmenu li + li:before {     content: '|';     display:inline-block;     padding: 0 6px; } 

fiddle

this adds pipe before each list item - starting second item.

using method - no 'last' classes or last-child pseudo selectors necessary.

#mainmenu {    height: 17px;    border-bottom: 1px dotted #acbbcb;    padding-bottom: 5px;  }  .action-bar .menu li {    display: inline-block;    line-height: normal;  }  .action-bar .menu li {    text-decoration: none;    color: #000;    display: inline-block;  }  #mainmenu li + li:before {    content: '|';    display: inline-block;    padding: 0 6px;  }

<nav class="action-bar row">    <div>      <ul id="mainmenu" class="container menu">        <li class="home active first"><a href="/">home</a>        </li>        <li><a href="/about">about us</a>        </li>        <li><a href="/whatwedo">what do</a>        </li>        <li class="last">          <a href="/contact">contact us</a>        </li>      </ul>    </div>  </nav>