pseudo-elements and <ul> display: table

Question

In Firefox (27.0.1) I can't position :after relative to the <li> it pertains to, if the <li> is display: table-cell;

http://jsfiddle.net/6WHN6/

ul {
    display: table;
    width: 400px;
    border: solid 1px black;
    padding: 0;
}

li {
    display: table-cell;
    position: relative;
    text-align: center;
}

li:after {
    content: ' ';
    position: absolute;
    height: 100%;
    width: 1px;
    background: blue;
    margin-left: 33.3%;
}

li:last-child:after {
    content: none;
}

Is there a way to style a psuedo-element on an <li> relative to that <li> in Firefox, if that li is display: table-cell;, and if not, why?

In the fiddle, you can see that the pseudo-elements have a left-margin which is 33.3% the width of the document.

Answer 1

From the spec

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

As position: absolute will be computed from closest parent with position: relative (or root body), it ignores "table-cell w/ position: relative" parent and will compute from other ancestral.