css - 伪元素悬停和文本装饰

Question

给定以下html：

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

text-decoration是否可以在悬停时更改（无）？color意志改变，意志不变text-decoration。

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

正如我在另一个答案中解释的那样，您可以使用display: inline-block来防止text-decoration设置为祖先传播到您的元素：

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>

Answer 2

让事情变得更容易并将其分开

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;
}

Answer 3

除 IE 以外的所有浏览器都可以使用display: inline-block。要让它在 IE8+ 中工作，请添加overflow:hidden到包含图标的伪元素。

如果下划线仍然保留在 IE 中，则line-height: 1在伪元素上设置，因此您总共得到

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