Edit in JSFiddle

                              
    <article>
        <h1>Generated content bug in Safari 5+ &amp; IE9</h1>
        <p>I used to be a opposer to the <a href="http://en.wikipedia.org/wiki/Browser_sniffing">browser sniffing</a> and considered it as a ‘bad thing’, but to be honest: IMHO without it it’s not possible to create a good looking website, <strong>at least when it comes to the details</strong>.</p>
        <p>Let’s consider links to the posts, articles etc. Very often after such a links the <code>&amp;raquo;</code> entity is used. IMHO it’s not semantically correct to put it within the code as it is a quotation mark, but users got used to that. Generated content can be used to apply it, but here comes the problem – Safari and IE won’t let you style it as it should. The behavior of text underline, when such links are hovered is not correct and is far from the behavior which CSS2 specification is defining.</p>
        <p>The specification says:</p>
        <blockquote>
            <p class="ellipsis">The <code>:before</code> and <code>:after</code> pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.</p>
            <p>In a <code>:before</code> or <code>:after</code> pseudo-element declaration, non-inherited properties take their initial values.</p>
            <cite><a href="http://www.w3.org/TR/CSS2/generate.html#before-after-content">W3C, CSS 2.1, Generated content</a></cite>
        </blockquote>
        <p>So below there's the code for those links and according to the specification it should work just fine...</p>
        <h2>HTML</h2>
        <pre><code>&lt;p class="more"&gt;&lt;a href="#"&gt;read post&lt;/a&gt;&lt;/p&gt;</code></pre>
        <h2>CSS</h2>
        <pre><code><span class="comment-title">/* base */</span>
        
.more a:after {
    color: #cd0a0a;
    content: '\0000BB';
    height: 100%;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: right;
    top: -1px;
    width: 10px;
}

<span class="comment-title">/* expected behavior (shown in case 01), commented out for testing purposes */</span>

/*
    .more a { text-decoration: none; }
    .more a:hover { text-decoration: underline; }
    .more a:after { text-decoration: none !important; }
*/

<span class="comment-title">/* a little overkill */</span>
        
<span class="comment-subtitle">/* case 01 */</span>
#case-01 .more a, 
#case-01 .more a:after, 
#case-01 .more a:hover:after {
    text-decoration: none;
}
        
#case-01 .more a:hover {
    text-decoration: underline;
}
        
<span class="comment-subtitle">/* case 02 */</span>
#case-02 .more a, 
#case-02 .more a:hover:after {
    text-decoration: none;
}
        
#case-02 .more a:after, 
#case-02 .more a:hover {
    text-decoration: underline;
}
        
<span class="comment-subtitle">/* case 03 */</span>
#case-03 .more a, 
#case-03 .more a:hover:after {
    text-decoration: underline;
}
        
#case-03 .more a:after,
#case-03 .more a:hover {
    text-decoration: none;
}</code></pre>
        <h2>Examples</h2>
        <p>The generated (pseudo) elements are <b class="red">red</b>, to highlight the behavior. Testing examples below shows that Firefox, Opera &amp; Chrome are doing just fine, but Safari and IE are messing with text underline on the generated content.</p>
        <div class="group-span3">
            <article id="case-01">
                <h1>This is case 01</h1>
                <p>By default 'read post' link at the bottom of this module is not underlined <strong>neither is entity</strong> (<b class="red">&raquo;</b>) genereated with <code>:after</code> pseudo-element. While hovered the link is underlined and the entity (<b class="red">&raquo;</b>) <strong>is not</strong>.</p>
                <hr /> 
                <p>Consectetur adipiscing elit. Phasellus tincidunt tristique velit, sed egestas dolor semper ut. Sed turpis ipsum, consequat id porttitor vitae, interdum nec lorem. Sed vel erat ipsum, at aliquet tellus? Aenean dictum sodales justo, non mattis nisl rutrum at.</p>
                <p class="more"><a href="#">read post</a></p>
            </article><!-- #case-01 -->
            <article id="case-02">
                <h1>This is case 02</h1>
                <p>By default 'read post' link at the bottom of this module is not underlined unlike the entity (<b class="red">&raquo;</b>) genereated with <code>:after</code> pseudo-element, which <strong>is underlined</strong>. While hovered the link is underlined and the entity (<b class="red">&raquo;</b>) <strong>is not</strong>.</p>
                <hr /> 
                <p>In luctus posuere nisl, a elementum enim eleifend vel. Nullam eget urna id mi iaculis cursus. Phasellus ut eros lectus, a faucibus dui? Integer tempor ante a mauris ultricies egestas. Praesent ligula dolor, lobortis pulvinar pretium sit amet; ultricies in lectus.</p>
                <p class="more"><a href="#">read post</a></p>
            </article><!-- #case-02 -->
            <article id="case-03">
                <h1>This is case 03</h1>
                <p>By default 'read post' link at the bottom of this module is underlined, and the entity (<b class="red">&raquo;</b>) genereated with <code>:after</code> pseudo-element <strong>is not</strong>. While hovered the link loses underline and the entity (<b class="red">&raquo;</b>) <strong>gets it</strong>.</p>
                <hr /> 
                <p>Eleifend eu congue in, rhoncus quis diam. Nulla est arcu, tristique sed porttitor sed, malesuada nec eros. Morbi aliquet posuere pulvinar. Nam facilisis nisi eu tortor faucibus vitae scelerisque dui volutpat. In eget quam in metus porta dictum!</p>
                <p class="more"><a href="#">read post</a></p>
            </article><!-- #case-03 -->
        </div><!-- .group-span3 -->
        <footer>
            <p>I do not give a fuck about intellectual property or attribution. If you find any part of this code useful for you, it's yours under <a href="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0</a>. Follow me on Twitter: <a href="https://twitter.com/TomaszCzypicki" target="_blank">@TomaszCzypicki</a></p>
        </footer>
    </article>
        * {
            background: transparent;
            border: 0;
            font-size: 100%;
            margin: 0;
            outline: 0;
            padding: 0;
            vertical-align: baseline;
        }
        
        html {
            background: #f6f6f6;
        }
        
        body {
            border: 1px solid #aaa;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            -moz-box-shadow: 0 0 3px rgba(0,0,0,.3);
            -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
            box-shadow: 0 0 3px rgba(0,0,0,.3);
            color: #333;
            font: 15px/1.35 sans-serif;
            margin: 15px auto;
            padding: 30px;
            text-shadow: 0 1px 0 rgba(255,255,255,.9);
            width: 960px;
        }
        
        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
            display: block; 
        }
        
        
        h1, h2 {
            color: #444;
            font: bold 25px/1.35 serif;
        }
        
        h2 {
            font-size: 18px;
            text-transform: uppercase;
        }
        
        h1, h2, p, blockquote, pre {
            margin: 20px 10px;
        }
        
        a:link, 
        a:visited { /* yeah, usability ;] */
            color: #07d;
        }
        
        a:hover {
            color: #005fb3;
            text-decoration: none;
        }
        
        hr {
            border-top: 1px dashed rgba(0,0,0,.15);    
            display: block;
            height: 1px;
            line-height: 1px;
            margin: 19px 0 20px;
        }
        
        pre, code {
            color: #006000;
            font-family: monospace, sans-serif;
        }
        
        pre {
            background: #fafafa;
            border: 1px solid #E1E1E8;
            border-width: 1px 1px 1px 5px;
            font-size: 13px;
            overflow: auto;
            padding: 11px 10px;
            -moz-tab-size: 2;
            -webkit-tab-size: 2;
            tab-size: 2;
            white-space: pre;
            white-space: pre-wrap;
            word-wrap: break-word; /* IE */
        }
        
        blockquote {
            color: #111;
            font-family: serif;
            font-size: 17px;
            font-style: italic;
            padding: 0 20px;
            position: relative;
            quotes: none;
        }
        
        blockquote p {
            margin: 0;
        }
        
        :root blockquote p:first-child:before { /* exclude IE lt 9 */
            content: '\00201C';
        }

        blockquote p:last-of-type:after {
            content: '\00201D';
        }
        
        .ellipsis:after {
            content: '(\002026)';
            display: block;
            line-height: 1;
            margin: 10px 0;
            width: 100%;
        }

        blockquote cite {
            display: block;
            font-size: 13px;
            margin-top: 20px;
            text-align: right;
        }
        
        blockquote cite:before {
            color: #07d;
            content: '\002013\0000A0';
        }
        
        blockquote cite a {
            text-decoration: none;
        }

        blockquote cite a:hover {
            text-decoration: underline;
        }

        footer {
            border-top: 1px dashed rgba(0,0,0,.45);
            margin: 45px 10px 0;
            padding: 10px 5px 0;
            overflow: hidden;
        }
        
        footer p {
            font-size: 11px;
            line-height: 15px;
            margin: 0;
        }

        footer a {
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }
                
        .red {
            color: #cd0a0a;
        }
        
        .blue {
            color: #07d;
        }
                
        .comment-title {
            /* color: #003061; */
            color: #006161;
        }
        
        .comment-subtitle {
            color: #610000;
        }
        
        .group-span3:before, 
        .group-span3:after {
            content: ".";
            display: block;
            height: 0;
            overflow: hidden;    
        }

        .group-span3:after {
            clear: both;
        }
        
        .group-span3 article {
            background: #fdfdfc;
            border: 1px solid #aaa;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            -moz-box-shadow: 0 5px 4px -3px rgba(0,0,0,.45);
            -webkit-box-shadow: 0 5px 4px -3px rgba(0,0,0,.45);
            box-shadow: 0 5px 4px -3px rgba(0,0,0,.45);
            float: left;
            margin: 0 10px;
            overflow: hidden;
            width: 298px;
            /* after border-radius shorthand */
            -webkit-background-clip: padding-box; 
          -moz-background-clip: padding; 
          background-clip: padding-box; 
        }
        
        .group-span3 article h1 {
            background: #777;
            color: #fefefe;
            font-size: 20px;
            margin: 0;
            padding: 5px 10px;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        }
        
        .group-span3 p {
            font-size: 13px;
            margin: 17px 10px;
        }
        
        hr {
            margin: 17px 10px 16px;
        }

        /* links with generated content (wrapped in paragraph) */
                
        .group-span3 .more {
            border-top: 1px dashed #aaa;
            font-size: 11px;
            font-weight: bold;
            margin: 0;
            padding: .625em 10px;
            text-align: right;
        }
        
        .more a {
            display: inline-block;
            padding-right: 10px;
            position: relative;
        }
        
        .more a:after {
            color: #cd0a0a;
            content: '\0000BB';
            height: 100%;
            overflow: hidden;
            position: absolute;
            right: 0;
            text-align: right;
            top: -1px;
            width: 10px;
        }
                
        /* ********** problematic part ********** */
        
        /* this would be default 01 */
/*
        .more a {
            text-decoration: none;
        }
        
        .more a:hover {
            text-decoration: underline;
        }
        
        .more a:after {
            text-decoration: none !important;
        }
*/
        
        /* this would be default 02 */
/*
        .more a {
            text-decoration: underline;
        }
        
        .more a:hover {
            text-decoration: none;
        }
        
        .more a:after {
            text-decoration: none;
        }
*/
        
        /* case 01 */
        #case-01 .more a, 
        #case-01 .more a:after, 
        #case-01 .more a:hover:after {
            text-decoration: none;
        }
        
        #case-01 .more a:hover {
            text-decoration: underline;
        }
        
        /* case 02 */
        #case-02 .more a, 
        #case-02 .more a:hover:after {
            text-decoration: none;
        }
        
        #case-02 .more a:after, 
        #case-02 .more a:hover {
            text-decoration: underline;
        }
        
        /* case 03 */
        #case-03 .more a, 
        #case-03 .more a:hover:after {
            text-decoration: underline;
        }
        
        #case-03 .more a:after,
        #case-03 .more a:hover {
            text-decoration: none;
        }
</style>
<!-- access to the HEAD element -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>