IE:11 在不工作之前将鼠标悬停

Question

我的 link 具有以下结构：

a{
  // some css here
}
a:before{
 // contains font icon
}
a:hover{
 text-decoration:underline;
}
a:hover:before{
 text-decoration:none;
}

我只需要在悬停 link 时添加 text-decoration:underline，而不是在之前的部分。我的代码在 chrome 上运行良好，但在 IE 11 上，text-decoration:none 不适用于 a:hover:before。

Answer 1

你可以做的是把<a>的主要内容放在一个span里，只在span下画下划线。

a {
  text-decoration:none;
}
a:before {
 content: '➠ ';
}
a:hover span {                 /* changed */
 text-decoration:underline;
}
a:hover:before {
 text-decoration:none;
}

<a href="#"><span>Click here</span></a>