title: How to style a CSS pseudo-element without an underline decoration inside a link?
body: <p>Is it possible to add a <em>:before</em> pseudo-element by CSS to an <em>A</em> html tag without showing the underline text decoration for the pseudo-element?</p>
  
  <p>In the following markup, a "+" symbol is added on the left of the link that it's correctly underlined on mouse over however also the pseudo-symbol "+" is underlined even if the css rule is set to "h3 a:before:hover{ text-decoration:none; }"</p>
  
  <pre><code>&lt;style&gt;
  h3 {
      display:block;
      margin:20px auto;
      padding:6px;
      width:85%;
      text-align:left;
      font: 21px 'lucida sans'; color:#444; 
      border-bottom:#ccc 1px solid;
  }
  h3 a{
      margin:0; padding:8px 4px 0 0;
      display:inline;
      float:right;
      width:auto;
      text-decoration:none;
      font: 14px 'lucida sans';   
  }
  h3 a:hover{ text-decoration:underline; }
  h3 a:before{ content: '+'; margin:0; padding: 4px; }
  h3 a:hover:before{ text-decoration:none; }
  &lt;/style&gt;
  
  &lt;h3&gt;My Title &lt;a href="#"&gt;link&lt;/a&gt;&lt;/h3&gt;
  </code></pre>