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

My Title link

```

Accepted Answer

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

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

Solution

Problem

Related problems