How to style a CSS pseudo-element without an underline decoration inside a link?

Question

Is it possible to add a :before pseudo-element by CSS to an A html tag without showing the underline text decoration for the pseudo-element?

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; }"

<style>
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; }
</style>

<h3>My Title <a href="#">link</a></h3>

Answer 1

Setting the :before element to display:inline-block; will make it take the text-decoration:none; style.

http://jsfiddle.net/KpRg7/3

  h3 a:before{
      display:inline-block;
      content: '+';
      margin:0;
      padding: 4px;
      text-decoration:none;
  }

Answer 2

Well I can contribute to the answer, but don't have the solution. Instead of h3 a:before:hover, reverse the pseudo classes, i.e. h3 a:hover:before. That will at least target the :before portion properly.