Question

我正在尝试找到一种方法来从超链接的图像中删除外部链接图标。我希望图标仅在文本链接后出现。我找到了这个Remove external link icon from image，但在那边没有任何答案。

#myLink a[href^="//"]:after, 
#myLink a[href^="http://"]:after,
#myLink a[href^="https://"]:after {
    content: "\f35d";
    font-family: "Font Awesome"; 
    font-weight: 900;
    margin: 0 0 0 5px;
}

Answer 1

将来，您将可以使用:has()伪类。

如果:has() CSS伪类作为参数传递的任何选择器（相对于给定元素的：scope）都匹配至少一个元素，则该元素代表一个元素。

以下选择器仅匹配直接包含子元素的元素：

a:has(> img)

就目前而言，您将不得不使用JavaScript来做到这一点，以jQuery为例：

$('a').each(function() {
    if ($(this).find('> img').length) {
        // do something...
    }
});

Answer 2

您可以添加它以覆盖CSS中的样式。只需将其添加到上述CSS选择器之后即可。

现在psedu类正在为myLink超链接添加样式。如果添加以下样式，它将覆盖现有样式，并使伪类样式有效地删除。

根据任务描述，这可能是任务的必需解决方案

#myLink a[href^="//"]:after, 
#myLink a[href^="http://"]:after,
#myLink a[href^="https://"]:after {
    content: none;

}

Answer 3

实际上，我有一种使用jquery和CSS的方法。我在这里发布我的解决方案，以防万一有人需要。我只是使用jquery在标签中添加了一个类，然后将display：none添加到psuedo元素（：after）中。见下文：

$('a').has('img').addClass('hyperlinkedimage');

.hyperlinkedimage { display: none; }

从超链接图像中删除外部链接图标

3 个答案: