title: Position and size of ::before pseudo-elements in Internet Explorer
body: <p>I made <a href="https://rawgit.com/damangio/inbreeding-calculator/2cec09d5c20a1a414e18ff16aae1b6409472e877/index.html" rel="nofollow">this pedigree diagram</a> out of nested tables, using <code>::before</code> pseudo-elements to build the lines connecting the fields. It works great in Chrome and Firefox, but in Internet Explorer 11 the pseudo-elements are too short and in the wrong place.</p>
  
  <p>Here is the relevant CSS:</p>
  
  <pre><code>#pedigree td:first-child {
      width: 8em;
      padding: 3px;
      position: relative;
  }
  tr.s &gt; td:first-child::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 2px;
      height: 50%;
      border: solid gray;
      border-width: 1px 0 0 1px
  }
  tr.d &gt; td:first-child::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 50%;
      width: 2px;
      height: 50%;
      border: solid gray;
      border-width: 0 0 1px 1px
  }
  </code></pre>
  
  <p>Each pseudo-element is supposed to be half the height of its containing <code>&lt;td&gt;</code>; for <code>.s</code> the bottom half, and for <code>.d</code> the top half. The pair of pseudo-elements together form a <code>[</code> shape.</p>
  
  <p>In Chrome and Firefox, the <code>top</code>, <code>bottom</code>, and <code>height</code> are interpreted as percentages of the height of the <code>&lt;td&gt;</code>. In IE, they appear to be interpreted as percentages of the distance between the top of the <code>&lt;td&gt;</code> and the top of its content.</p>
  
  <p>How can I make the appearance in IE match the other browsers?</p>