pseudo-elements and
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.

@Paulie_D I'm trying to get an explanation or solution for this difference in rendering between browsers. Not just trying to make a table with borders, I think the fiddle shows problem well. --Updated question. — rob-gordon, Mar 27 '14 at 10:39
Firefox has a bug with `position:relative;` `` elements. http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements — Nico O, Mar 27 '14 at 10:56

score 3 · Accepted Answer · answered Mar 27 '14 at 10:56

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.

pseudo-elements and display: table

http://jsfiddle.net/6WHN6/

1 Answers1

pseudo-elements and
display: table