title: CSS Pseudo-elements :before & :after work differently in Internet Explorer
body: <p>I have a very specific problem as I am trying to create a navigation that has angles using purely CSS without images or javascript. I have figured it out so that it works perfectly but the problem I am coming across is that IE 9 and Chrome look different. I can get both to work by changing the margins of the pseudo elements but I would prefer a single solution to work in both. If anyone can figure out why the margins are different and give me a single CSS solution to work in both browsers that would be great. Otherwise I will have to add a seperate class for IE and force it to work using a seperate CSS entry.</p>
  
  <p>Here is the jsfiddle to work with <a href="http://jsfiddle.net/rrg3/jSdWR/" rel="nofollow">arrow-nav</a></p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#" &gt;Some Navigation&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;More navigation&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Another Nav&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Test Nav&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;A Test Navigation&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>ul {
      float:right;
      list-style-type:none;
      margin:0;
      padding:0;
      width: 300px;
  }
  ul li a {
      float:left;
      width:300px;
  }
  ul li{
      float:left;
      width: 300px;
      height:50px;
      line-height:50px;
      text-indent:10%;
      background: grey;
      margin-bottom:10px;
      border:1px solid black;
  }
  ul li:before {
      content:"";
      position:absolute;
      margin-top:-1px;
      border-top: 26px solid transparent;
      border-bottom: 26px solid transparent;
      border-right: 21px solid black;
      margin-left:-22px;
  }
  ul li:after {
      content:"";
      position:absolute;
      border-top: 25px solid transparent;
      border-bottom: 25px solid transparent;
      border-right: 20px solid grey;
      margin-left:-320px;
  }
  </code></pre>