CSS columns: specify the last child in each column?

Question

I have a newspaper headline grid using CSS3 column columns.

http://jsfiddle.net/L6TTJ/

HTML:

<ul>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <!-- ... etc ... -->
</ul>

CSS (vendor prefixes and inapplicable rules omitted for brevity) :

ul {
    column-count: 3;
    column-rule: 1px solid #ccc;
}
li { border-bottom: solid 1px #ccc; }

You can see where this happens: are there any means in CSS for targeting the last element liin each column so that I can remove the bottom border?

I found this question , but no answer.

Answer 1

, @Vucko , , . , . , , . , , - CSS, , , , Vucko, .

, ul, ul, . , ( ), , , :

ul {
  ...
  position:relative;
}

ul:after {
  content:'';
  width:100%;
  height:34px;
  position:absolute;
  background-color:inherit;
  bottom:0;
  left:0;
} 

Fiddle 3 . , .

. , ( ). , , ul.

Answer 2

.. , .

, , ( ).

Answer 3

li: nth-child (2n) {border-bottom: none; }

li:nth-child(2n)
{
    border-bottom: none;
}

Fiddle