css - 用 :hover:before 删除下划线

Answer 1

到目前为止，我发现从生成的内容中删除（通常）继承的样式的唯一方法是position: absolute使用简化的演示（来自评论）给它：

a:link
{
    text-decoration: none;
    position: relative;
    margin-left: 1em;
}

a:hover
{
    text-decoration: underline;
}

a:before
{
    content: '#';
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 1em;
}

JS 小提琴演示。

当然，这种方法的缺点是需要将显式width分配给生成的内容（以及margin父a元素的）。

Answer 2

另一种方法是将链接的文本包装在元素中，例如跨度，从“a”中删除下划线并将其应用于悬停时的跨度。

<li><a class="entypo-home active" href="#"><span>Home</span></a></li>

[class*='entypo-'] a { text-decoration: none; }
[class*='entypo-'] a:hover span { text-decoration: underline; }

Answer 3

恐怕这行不通。我建议给你上课<li/>并:before为他们设置。

如果您不想使用该position: absolute方法，这是我的建议。