Wrap "print" in a span
<a href="#"><i class="icon-print"></i><span>Print</span></a>
and in css
a {text-decoration:none;}
a:hover {text-decoration:none;}
a:hover > span { text-decoration:underline;}
Domanda
I have the following problem with the Internet Explorer 8+. It works in all other Browsers.
I dont want a underline hover effect on the i-tag inside the a-tag. The IE 8+ Ignores the hover pseudoclass on the i-tag. Here ist the HTML-Code:
<a href="#"><i class="icon-print"></i>Print</a>
This is the associated CSS-Code:
a:hover {text-decoration: underline;}
a i:hover {text-decoration: none;}
Soluzione
Wrap "print" in a span
<a href="#"><i class="icon-print"></i><span>Print</span></a>
and in css
a {text-decoration:none;}
a:hover {text-decoration:none;}
a:hover > span { text-decoration:underline;}
Altri suggerimenti
This will never works dude because the a-tag contain the i-tag and in your CSS code you say
a:hover {text-decoration: underline;}
everything inside the a-tag will be underlined ... so the only solution is to separate the i-tag from a-tag