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

【问题标题】：How to remove link below image (but keep on text)?如何删除图片下方的链接（但保留文字）？
【发布时间】：2011-11-07 12:52:05
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

img {
  text-decoration: none;
}

【讨论】：