: last-child: before with column-count behaves differently in chrome and firefox

Question

Expected Behavior (Firefox)

Unexpected (Chrome)

JSFiddle demo

http://jsfiddle.net/bZaKK/ (try it in Firefox and Chrome to see the difference).

HTML

<ul> <li><a href="">List item 1</a></li> <li><a href="">List item 2</a></li> ... <li><a href="">List item 9</a></li> </ul> 

CSS

 ul { position: relative; list-style: none; margin: 0; padding: 0; -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } li:last-child:before { position: absolute; content: " "; display: block; background-color: red; height: 1px; top: -1px; width: 100%; } 

Question

Why is this happening and how can I fix it with pure CSS? Is this a firefox bug or a chrome bug?

Note. I found this obvious error when answering this question: Styling the first element in a css column .

Answer 1

Chrome really gives the right behavior. An unordered list is assigned position:relative , so the line will be positioned absolute , relative to ul.

Adding left:0 to li:last-child:before will give the same behavior in firefox

http://jsfiddle.net/bZaKK/2/