title: li::before not working in IE9
body: <p>I have a utility nav set up as an unordered list and I would like to use li::before to insert a pipe "|" symbol between each link in the utility nav.</p>
  
  <p>Here is my utility nav...</p>
  
  <pre><code>&lt;div class="horizontalnavlinks"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="/ets/"&gt;Time &amp; Expense&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/intrnl/voffice/TAC/default2.asp"&gt;TAC&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/people/search/srchframe.asp"&gt;Employee Information&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="mailto:intranetfeedback@ch2m.com"&gt;Can't Find It?&lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here are my styles.</p>
  
  <pre class="lang-css prettyprint-override"><code>.horizontalnavlinks ul
  {
      margin: 0;
      padding: 0;
      list-style-type: none;
  }
  
  .horizontalnavlinks ul li
  {
      display: inline;
  }
  
  .horizontalnavlinks li + li::before
  {
      content: " | ";
      padding: 0 10px;
  }
  </code></pre>
  
  <p>The pipes show up great in Chrome and Safari, but don't show up in IE9. In fact IE9 ignores the enter <code>.horizontalnavlinks li + li::before</code> style. </p>
  
  <p>Everything I read says IE supports pseudo styles. What gives?</p>