It is common to create a list with a separator in between like this:
Item 1 | Item 2 | Item 3

One common way of doing this is create a list (ol / ul) then apply the border-left and add a class “first” to the first li setting the border to 0px. This is good, but this can be done in a better way.

Let start with an ordered list, and applying css border-left on it.
<ol id=”sample-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

With the style:
/* reset the li element */
ol{margin:0px;padding:0px;}
li{margin:0px;padding:0px;list-style:none;}

#sample-list li{border-left:1px solid #ccc;float:left;padding: 2px 5px;}

The result will become:
| Item 1 | Item 2 | Item 3

Which shown an extra border at the left. One simple way to eliminate the first border is adding a classname to the first li and clear our the border, but this will add extra logic in your PHP code. So that will be nice if we can solve in CSS and keep the PHP code a bit cleaner.

By using negative margin, the item list above can be shown nicely without the extra class.

<ol id=”sample-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

With the style:
/* reset the li element */
ol{margin:0px;padding:0px;}
li{margin:0px;padding:0px;list-style:none;}

#sample-list {overflow:hidden;display:block;}
#sample-list li{border-left:1px solid #ccc;float:left;padding: 2px 5px;margin-left:-1px;}

In the CSS above, by setting li with margin-left:-1px; the first border-left will fall out of the ol. With ol#sample-list set to overflow:hidden, that extra line will be wipe out from screen and leave all the other separators there.

This technique can works in a vertical list with horizontal separator. Just set the border to top and margin-top:-1px then set the container’s overflow to hidden. Done!