title: Internet Explorer's problem with css :after pseudo element when using opacity filter
body: <p>I am drawing a pointed triangle at the bottom of the div using :after pseudo-element.  It works as designed.  However, when I add the opacity filter for the div, it stops working in IE (I am testing it on IE8). It works just fine in FF, Chrome, and Safari.</p>
  
  <p>Here is HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
          &lt;div id="demo"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is CSS:</p>
  
  <pre><code>#demo {
    background-color: #333;
    height: 100px;
    position: relative;
    width: 100px;
  }
  #demo:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 10px solid transparent;
    border-top-color: #333;
    top: 100%;
    left: 10px;
  }
  </code></pre>
  
  <p>Run it in IE and see the result that looks like image here: <a href="http://yuiblog.com/assets/cssarrows/shapes_2.png" rel="nofollow">link text</a></p>
  
  <p>Now add IE opacity filter: to the #demo so it looks like this and run it in IE again:</p>
  
  <pre><code>#demo {
    background-color: #333;
    height: 100px;
    position: relative;
    width: 100px;
  
    filter: alpha(opacity=50);
  }
  </code></pre>
  
  <p>Notice that opacity filter works but the triangle at the bottom of the div disappeared. 
  The same thing works just fine in every other browser (the only difference is that you need to use "opacity: 0.5" instead of IE specific "filter: alpha(opacity=50);")</p>
  
  <p>Does anybody know why this is happening, and how to get around it?</p>
  
  <p>Thanks.</p>