CODEWITHSUNDEEP
csspseudo-class
Mike Henderson
Mike Henderson

Reputation: 148

Pseudo Element Hover and text-decoration

Given the following html:

<a href="#"><span data-icon="✪"></span>A Link</a>

Is it possible to change the text-decoration (to none) on hover? The color will change, the text-decoration will not.

CSS: 

a { text-decoration: none; }
a:hover{ text-decoration: underline; }
a:hover [data-icon]:before{
  /*Doesn't work*/
  text-decoration: none;

  /*Works*/
  color: red;
}

jsfiddle

Upvotes: 4

Views: 2388

Answers (3)

Oriol
Oriol

Reputation: 288080

As I explained in this other answer, you can use display: inline-block to prevent text-decoration set to an ancestor from propagating to your element:

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a > [data-icon]:before {
  display: inline-block; /* Avoid text-decoration propagation from `a` */
  content: attr(data-icon);
}
a:hover > [data-icon]:before {
  color: red;
}
<a href="#"><span data-icon="✪"></span>A Link</a>

Upvotes: 11

herrschuessler
herrschuessler

Reputation: 1

Using display: inline-block works in all browsers but IE. To get it to work in IE8+, add overflow:hidden to the pseudo element containing the icon.

If the underline still remains in IE, set line-height: 1 on the pseudo element, so in total you get

a [data-icon]:before {
    display: inline-block;
    overflow: hidden;
    line-height: 1;
}

Upvotes: -1

Huangism
Huangism

Reputation: 16438

Make things easier and separate it out

http://jsfiddle.net/nyFxn/2/

<a href="#"><span data-icon="✪"></span><span class="text">A Link</span></a>

CSS

a:hover{  text-decoration: none; }
a:hover [data-icon] {

  /*Works*/
  color: red;
}
a:hover .text {
    text-decoration: underline;
}

Upvotes: 0

Related Questions