如何设置像维基百科这样的外部链接？

Question

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

我想在这些链接的右侧添加一个小图标，但它不会覆盖其他文本。

我想使用的图标是icon used on Wikipedia。

例如，这是一个外部链接：

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

这是一个内部链接：

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

---

---

我怎样才能只使用 CSS 来做到这一点？

Answer 1

好的，这与其他答案非常相似，但它简短而甜蜜，适用于 http 和 https。当然，如果您在内部 URL 中使用双斜杠，您会遇到问题，但无论如何您都不应该这样做（seethesequestions）。

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 */);
}

Answer 2

我认为这将帮助您简单地解决问题，

Add an offsite link icon after external links with 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

demo

基础知识

使用: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;
}