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;
}
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);
}
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/
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.
You can set height & overflow:hidden for :before element, and text-decoration will not be visible :)
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/
