如何设置维基百科等外部链接的样式？

Question

我想仅使用CSS来区分外部链接和内部链接.

我想在这些链接的右侧添加一个小图标,而不会覆盖其他文本.

我想要使​​用的图标是维基百科上使用的图标.

例如,这是一个外部链接:

<a href="http://stackoverflow.com">StackOverflow</a> 

这是一个内部链接:

<a href="/index.html">home page</a> 

---

---

我怎么能用CSS做到这一点？

Answer 1

演示

基本

使用: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/这样的网址.

注意:请确保在您的样式中使用上述内容

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

Answer 2

我认为这可以帮助您简单地解决问题,

在使用CSS的外部链接后添加一个非现场链接图标

从文章引用:

这将使所有链接最终用外部链接图标设置样式,

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

Answer 3

好吧,这与其他答案非常相似,但它简短而且甜美,适用于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 */);
}