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

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