title: pseudo-elements and <ul> display: table
body: <p>In Firefox (27.0.1) I can't position <code>:after</code> relative to the <code>&lt;li&gt;</code> it pertains to, if the <code>&lt;li&gt;</code> is <code>display: table-cell;</code></p>
  
  <h3><a href="http://jsfiddle.net/6WHN6/" rel="nofollow">http://jsfiddle.net/6WHN6/</a></h3>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Is there a way to style a psuedo-element on an <code>&lt;li&gt;</code> relative to that <code>&lt;li&gt;</code> in Firefox, if that li is <code>display: table-cell;</code>, and if not, why?</p>
  
  <p>In the fiddle, you can see that the pseudo-elements have a left-margin which is 33.3% the width of the document.</p>