Question

问题

我需要跨度不能text-decoration: underline。无论如何我都无法改变标记。这可能吗？

标记

<a href="#">
    Working test
    <span>▼</span>
</a>

CSS

a:hover {
    text-decoration: underline;
}

a:hover span {
    text-decoration: none;
}

Answer 1

试试 jsFiddle example 。适用于所有现代浏览器和IE8 +。

a {
    text-decoration:none;
    position:relative;
    padding-right:16px;
}
a:hover {
    text-decoration: underline;
}
span {
    text-decoration: none;
    position:absolute;
    right:0;
}

Answer 2

我不敢。

你要遇到的问题是父元素（锚<a>）将在span的任何地方都有下划线，因为它位于CSS中具有下划线的锚点内。如果你可以更改标记，你可以使用下面的内容，它只将下划线应用于你想要下划线的锚点（包裹在一个范围内）。

<a href="#"><span class="nounderline">No</span> <span class="underline">Underline</span></a>

a {
  text-decoration: none;
}
span.underline {
  text-decoration: underline;
}

但是正如你的标记目前一样，没有办法实现它。

在href中停止跨越href从href继承悬停样式

2 个答案: