:hover:before text-decoration none has no effects?

Question

As title, I'm adding icons using .icon-*. When adding an icon to an hyperlink:

<a href="#" class="icon-email icon-large">Email me!</a>

The content inserted by content property shows the underline text-decoration on hover. I'd like to disable the text-decoration only for the content before:

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}
.icon-mail:before {
    content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
    font-size: 48px;
    line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}

I've tried this but it's not working (decoration is still visible):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
    text-decoration: none;
    color: white;
}

Solution 1

As the :before pseudo-element is rendered as a descendant box (more specifically, just before the first child content box) of its generating element, it obeys the same rules its normal descendant boxes do with respect to text-decoration:

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

See these answers for more details:

• CSS text-decoration property cannot be overridden by child element
• How do I get this CSS text-decoration override to work?

There isn't any good way around this... the only alternatives that come immediately to mind are:

• Wrap the text in its own span element, then apply text-decoration to that span, as shown by skip405. The disadvantage is, of course, extra markup.

• Use an inline block background image instead of inline text in an icon font with your :before pseudo-element (I've also corrected the inconsistencies with your class selectors):

  [class^="icon-"]:before, [class*=" icon-"]:before {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-size: contain;
      content: "";
  }
  .icon-email:before {
      background-image: url(icon-mail.svg);
      background-repeat: no-repeat;
  }
  .icon-large:before {
      width: 48px;
      height: 48px;
  }
  a[class^="icon-"]:before, a[class*=" icon-"]:before {
      margin-right: 5px;
      vertical-align: middle;
  }
  

  The advantage this has over skip405's solution is that you don't have to modify the HTML, but given that it uses SVG vector background images and background-size, it won't work in IE8.

  If you do need IE8 support, then you have to fall back to bitmap images:

  .icon-email:before {
      background-image: url(icon-mail.png);
  }
  .icon-email.icon-large:before {
      background-image: url(icon-mail-large.png);
  }
  

Solution 2

Insert display:inline-block; in your css. Something like the one below:

.icon-mail:before {
    content: "\37";
    display:inline-block;
    text-decoration:none;
}

Here is the JS FIDDLE:

http://jsfiddle.net/73p2k/18/

Solution 3

A pseudoelement selector must be the last item in a selection chain.

You can apply a style to element:hover:before but not to element:before:hover.

Solution 4

You can set height & overflow:hidden for :before element, and text-decoration will not be visible :)

Solution 5

Tried some things using just the a tag as a markup, but alas. A possible workaround for you may be to inner wrap the link in another element, a span, for instance. Thus you can have the underline on this element (instead of a pseudoelement) - which is perfectly controlled by css.

A live example is here: http://jsfiddle.net/skip405/fQHUH/

View more solutions