SharePoint CSS :after not working on IE
===

So I can get IE8 to use :after quite easily:

    <!DOCTYPE html>
    <html>
    <style type="text/css">
    a.styled:after
    {
    content:" HAHA! Business.";
    color:red;
    font-size:12pt;
    }
    </style>
    <body>
    Here's some text and stuff. <a href="google.com" class="styled">Here's a link.</a>
    </body>
    </html>

If I put that in a text document and open it in IE, it displays what it should: "Here's a link" is followed by "HAHA! Business," in red. When I try putting the exact same code into a SharePoint Content Editor web part, it works on every browser I've tried EXCEPT for Internet Explorer. With IE, nothing is displayed after the link when I use :after, but any other sort of styling works fine. What gives?