title: Is :hover:after supported in IE8?
body: <p>I have a flyout menu where at the end of "Quick Links" I use the :after pseudo-element on the first LI tag to display an icon from a sprite file.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;ul class="rs-quick-links-nav"&gt;
     &lt;li&gt;
      &lt;a href="#"&gt;QUICK LINKS&lt;/a&gt;
      &lt;ul&gt;
       &lt;li&gt;&lt;a href="#"&gt;Enhanced Recipe Search&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Recipe Collections &amp;amp; Favorites&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Cooking Tips &amp;amp; Techniques&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Shopping &amp;amp; Storing&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Tools &amp;amp; Products&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;New Uses for Old Things&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Guide to Ingredients&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.rs-quick-links-nav { position: absolute; top: 0; right: 20px; }
  .rs-quick-links-nav &gt; li { float: left; position: relative; white-space: nowrap; height: 19px; padding: 4px 0 4px 0; }
  .rs-quick-links-nav &gt; li &gt; a { color: #999999; display: block; font: normal 1.2em Arial, sans-serif; }
  .rs-quick-links-nav &gt; li:after { content: ' '; background: transparent url('@static.base@/i/rs-global-sprite.png') -220px 0 no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
  .rs-quick-links-nav &gt; li &gt; a:hover { text-decoration: none; }
  .rs-quick-links-nav &gt; li:hover:after { content: ' '; background: transparent url('global-sprite.png') -220px -20px no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
  .rs-quick-links-nav li ul { background-color: #FFFFFF; border: 4px solid #69b8b8; left: -9999px; padding: 2px 8px; position: absolute; top: 24px; visibility: hidden; z-index: 9900; }
  .rs-quick-links-nav li:hover ul { left: auto; right: -18px; visibility: visible; }
  .rs-quick-links-nav li li { padding: 2px 0; }
  .rs-quick-links-nav li li + li { border-top: 1px dotted #333333; }
  .rs-quick-links-nav li li a { color: #666666; display: block; font: normal 1.2em/30px Arial, Verdana, sans-serif; height: 30px; padding: 0px 8px; }
  .rs-quick-links-nav li li a:hover { background: #f6f6f6; }
  </code></pre>
  
  <p>What is supposed to happen is that when you hover over the LI tag, I change the icon to an active color.</p>
  
  <p>.rs-quick-links-nav > li:hover:after seems to work in Firefox, Chrome, and Safari, but not IE8 (I don't care about anything before IE8).  According to QuirksMode, IE8 supposedly supports :hover and :after, so I'm not sure why .rs-quick-links-nav > li:hover:after does not work.  Does anybody have any ideas how to make this work (even if I have to do something in Javascript).</p>
  
  <p>EDIT: DOCTYPE is the HTML5 doctype.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p>EDIT: JSFiddle fragment here
  <a href="http://jsfiddle.net/tangst/hA7FH/" rel="nofollow">http://jsfiddle.net/tangst/hA7FH/</a></p>