100% height pseudo element on a table cell in IE
<p>I am encountering an issue in IE9,10,11 where an <code>::after</code> pseudo element will not fill 100% of the height of it's <code>td</code> parent.</p>

<p>If the first column in the second row had two lines of text, the pseudo element would fill the full height with no problem. So, I figured that the issue was happening because the <code>td</code> was not filling the height of the <code>tr</code> but that isn't the case.</p>

<p>The first screenshot is Chrome and the second is IE9</p>

<p><a href="https://i.stack.imgur.com/cTc4L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cTc4L.png" alt="enter image description here"></a> <a href="https://i.stack.imgur.com/goUoF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/goUoF.png" alt="enter image description here"></a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;Two&lt;br/&gt;Lines&lt;/td&gt;
    &lt;td&gt;Two&lt;br/&gt;Lines&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;One Line&lt;/td&gt;
    &lt;td&gt;Two &lt;br/&gt;Lines&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>table td {
  border-bottom: 1px solid;
}

table td:first-child {
  position: relative;
}

table td:first-child::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 2px;
  height: 100%;
  display: block;
  background-color: orange;
}
</code></pre>

<p>Codepen: <a href="http://codepen.io/cbier/full/BjpaqB/" rel="nofollow noreferrer">http://codepen.io/cbier/full/BjpaqB/</a></p>

<p><strong>P.S.</strong> I am using an <code>::after</code> pseudo-element instead of borders for a special reason and it is a requirement</p>

<p>Thanks!</p>