Pseudo Element Hover and text-decoration

Question

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

Answer 1

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>