JSFiddle - React, Tailwind, and code Playground

Simple Menu Dividers Using jQuery .append() This is a simple menu that appends an li with a divider image after each li in an unordered list, but not on the last li.

by chrisallenmoore

HTML

<!--simple menu list -->
<ul class="menu">
    <li>Bookmarks</li>
    <li>Something</li>
    <li>BUMPER STICKERS</li>
    <li>CARBONLESS FORMS</li>
    <li>CD JACKETS</li>
    <li>DIE CUT/CUSTOM STICKERS</li>
    <li>DOOR HANGERS</li>
    <li>ENVELOPES</li>
    <li>FOLDERS</li>
    <li>LETTERHEADS</li>
    <li>RECTANGULAR STICKERS</li>
    <li>ROUND STICKERS</li>
    <li>STATIC CLING</li>
    <li>TABLE TENTS</li>
    <li>VINYL BANNERS</li>
    <li>WINDOW STICKERS</li>
</ul>

CSS

/*simple menu styling*/
.menu {
    display: block;
    width: auto;
}
.menu li {
    list-style-type: none;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    line-height: 14px;
    vertical-align: middle;
    padding: 4px;
}
.menu li:first-child {
    border-top: 1px solid #333;
}
.menu li:last-child{
    border-bottom: 1px solid #333;
}
.menu li.divider {
    border: none;
    padding: 0;
}
li img.dividerLine {
    //margin-left: -4px;
    width: 100%;
    height: 1px;
    border: none;
}

JavaScript

// this jQuery code appends an li with a divider image after each list item but not on the last list item.
$('ul.menu li:not(:last-child)').append('<li class="divider"><img class="dividerLine" src="https://dl.dropbox.com/u/13242521/jsfiddlestuff/1px-border.png" alt="divider line"></li>');