我想仅使用 CSS 来区分外部链接和内部链接。
我想在这些链接的右侧添加一个小图标,而不会覆盖其他文本。
我想使用的图标是 Wikipedia 上使用的图标。
例如,这是一个外部链接:
<a href="http://stackoverflow.com">StackOverflow</a>
这是一个内部链接:
<a href="/index.html">home page</a>
如何仅使用 CSS 来做到这一点?
我想仅使用 CSS 来区分外部链接和内部链接。
我想在这些链接的右侧添加一个小图标,而不会覆盖其他文本。
我想使用的图标是 Wikipedia 上使用的图标。
例如,这是一个外部链接:
<a href="http://stackoverflow.com">StackOverflow</a>
这是一个内部链接:
<a href="/index.html">home page</a>
如何仅使用 CSS 来做到这一点?
使用:after
我们可以在每个匹配的选择器之后注入内容。
第一个选择器匹配任何href
以 开头的属性//
。这适用于与当前页面保持相同协议(http 或 https)的链接。
a[href^="//"]:after,
这些是传统上更常见的网址,例如http://google.com和https://encrypted.google.com
a[href^="http://"]:after,
a[href^="https://"]:after {
然后我们可以将 url 传递给 content 属性以在链接后显示图像。可以自定义边距以适应
content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
margin: 0 0 0 5px;
}
假设我们正在进行中,example.org
并且我们希望blog.example.org
为此目的将指向同一域的链接标记为相同。这是一种相当安全的方法,但是我们可以有一个像http://example.org/page//blog.example.org/这样的 url
注意:确保这在您的样式中出现在上述内容之后
a[href*="//blog.example.org/"]:after {
content: '';
margin: 0;
}
对于更严格的匹配,我们可以采用我们的初始设置并覆盖它们。
a[href^="//blog.example.org/"]:after,
a[href^="http://blog.example.org/"]:after,
a[href^="https://blog.example.org/"]:after {
content: '';
margin: 0;
}
我认为这将帮助您简单地解决问题,
引用文章:
这将使所有链接最后都带有外部链接图标的样式,
a[href^="http://"] {
background: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png) center right no-repeat;
padding-right: 13px;
}
以下代码将阻止特定网址上的外部图标样式:
a[href^="http://www.stackoverflow.com"] {
background: none;
padding-right: 0;
}
好的,这与其他答案非常相似,但它简短而甜蜜,适用于 http 和 https。当然,如果您在内部 URL 中使用双斜杠,您会遇到问题,但无论如何您都不应该这样做(请参阅 这些 问题)。
a:not([href*="//"]) {
/* CSS for internal links */
}
a[href*="//"] {
/*CSS for external links */
}
我希望在我用和标记所有链接之前知道这一点。 class="internal"
class="external"
因此,要添加图像,如前所述:
a[href*="//"]::after {
content: url(/* image URL here */);
}