36

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;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
gremo
  • 47,186
  • 75
  • 257
  • 421
  • You can't do that with pseudoelements. You're going to have to use JS. – Bojangles Jul 13 '12 at 16:47
  • Yea you cannot double-up pseusoelements and pseudoclasses like that without js. I would suggest using javascript to handle the :before rather than to handle the :hover. That is because :before is not supported by all browsers. But that's just my 2 cents.. – BumbleB2na Jul 13 '12 at 16:47
  • @BumbleB2na at least IE8+, FF10.0.2+, Opera 11.61+, Safari 5.1.2+, Chrome 17 http://www.quirksmode.org/css/contents.html – gremo Jul 13 '12 at 16:57
  • @BumbleB2na: You can - the pseudo-element just has to be the last in the selector. – BoltClock Jul 14 '12 at 04:35
  • I notice some typos in the class and attribute selectors, not that these would relate to the issue at hand. Notably, your `icon-large` attribute selectors can simply be changed to `.icon-large:before` (but I'm assuming you only have that as a standalone class and not as a prefix for other classes). – BoltClock Jul 14 '12 at 04:39

6 Answers6

57

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/

Pinoy2015
  • 1,429
  • 15
  • 29
  • 1
    Thank you so much for this trick. Never would have thought of adding it. – Matt. Nov 19 '14 at 21:01
  • 4
    @acme, please see the latest jsfiddler for IE support. Tested in IE9 http://jsfiddle.net/73p2k/18/ – Pinoy2015 Dec 10 '14 at 10:10
  • So for IE you have to set `text-decoration:underline;` to `a:before` AND `text-decoration:none;` to `a:hover:before`. It seems to be a [bug](http://stackoverflow.com/a/21902566/1607968). Thx Pinoy2015! – Philipp Michael Nov 11 '16 at 09:34
  • 4
    What?? This actually worked... and only for inline-block.... Can you explain why does it behave that way, and how did you get to this conclusion? – Alexandr Apr 01 '20 at 16:21
  • 1
    In my case, this was the actual solution. – Marco Cazzaro May 14 '21 at 10:39
30

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:

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);
}
Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
4

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.

Doug Stephen
  • 7,181
  • 1
  • 38
  • 46
4

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

user123321
  • 235
  • 1
  • 2
  • 7
2

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/

skip405
  • 6,119
  • 2
  • 25
  • 28
0

This solution worked for me. It excluedes the pseude-elements. But for this you need to wrap the content of the <a> tag into an extra element.

a:hover { text-decoration: none; }
a:hover > * { text-decoration: underline; }


<a href="#"><span>content</span></a>
TylerD
  • 181
  • 1
  • 1
  • 8