html - 如何删除图片下方的链接（但保留文字）？

Question

我有一个带有文本和图像的链接。我不希望图像下面有下划线，但我确实希望文本有下划线。无论如何都可以支持这一点而不将它们分解为两个单独的链接？这是一个示例图片：

Answer 1

不，如果不将链接分成两部分，就无法实现这一目标。

另一种方法是放在border-bottom: 1px solid #000包含文本的元素上，但是这与原生 A 元素的行为不同，具有悬停、活动和访问状态 - 至少在没有 javascript 干预的情况下不会。

Answer 2

您可以轻松地执行以下结构的操作：

<a><span>text</span><img /></a>

然后，您可以从 中删除下划线a并将下划线应用于a span.

在这里演示：http: //jsfiddle.net/chrisvenus/pdrz9/

我应该注意以下内容不起作用：

img {
  text-decoration: none;
}