A continuous left border / separator on even list items?

Question

I have list items set up in 2 columns, with a bottom margin separating each 'row' of 2 items.

It's easy to set a left border on every even list item...

But I'm wondering if it's possible to set up the border such that it continues in a continuous vertical line with it's height as high as the second column.

Also, I don't want to use bottom padding on the list items, because then (amongst other things) the the separator will jut out below the list item.

This is what have so far:

(This is good)

(This is not what I want because the bottom margin of the items 'cuts' the silver line

FIDDLE

Markup:

<ul>
    <li></li><li></li><li></li>
</ul>

CSS:

ul
{
    list-style: none;
    width: 220px;
    background: wheat;
}
li
{
    display:inline-block;
    background: pink;
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
    position: relative;
}
li:nth-child(even)
{
    margin-left: 18px;
}
li:nth-child(even):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}

Answer 1

It is possible. However, I needed to encapsulate the contents of each list item into a div, which in my example has a height of 90% of the list item (so I could have a margin bottom). Then, add 2 style rules for gaining the silver lines.

li:nth-child(even):not(:nth-last-child(1)):not(:nth-last-child(2)):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:10;
    width: 4px;
    height: 100%;
    background: silver;
}
li:nth-child(even):nth-last-child(1):before,
li:nth-child(even):nth-last-child(2):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:10;
    width: 4px;
    height: 90%;
    background: silver;
}

Working demo: http://jsfiddle.net/er144/mUAPT/

Answer 2

Would this suit you?

I hust modified the li:before so it take the whole height including the li margins using padding-top

Then I positioned it heigher (top:-30px;) so only the next evn li has the separator. This makes the separator overflow the on of the ul so I set it to overflow:hidden

FIDDLE

CSS:

*
{
    margin:0;padding:0;
}
ul
{
    list-style: none;
    width: 220px;
    background: wheat;
    overflow:hidden;
}
li
{
    display:inline-block;
    background: pink;
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
    position: relative;
}
li:nth-child(even)
{
    margin-left: 18px;
}
li:nth-child(even):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:-30px;
    width: 4px;
    height: 100%;
    background: silver;
    padding-top:30px;
}

Answer 3

A simple idea which I would do is to put all the left side items in one div, right side items in another div and apply styles to it.

.right,.left{
float:left; 
}
.left{
 border-right:2px solid grey; 
}

OPTION 2:

Replace the following lines of code

li:nth-child(even):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}

with the following...

li:nth-child(odd):after
{
    content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 130%;
    background: silver;
}

//this is optional in according to the look and feel you are expecting

li:last-child:after{
content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}
li:last-child:after
{
    content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 130%;
    background: transparent;
}

li:nth-last-child(3):after
{
    content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}