我想使用CSS来区分外部和内部链接。
我想使用的图标是icon used on Wikipedia。
例如，这是一个外部链接：
<a href="http://stackoverflow.com">StackOverflow</a>
这是一个内部链接：
<a href="/index.html">home page</a>
如何使用CSS？
解决方法
demo
基本
使用：我们可以在每个匹配的选择器之后注入内容。
第一个选择器匹配从//开始的任何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;
}
