我想仅使用 CSS 区分外部链接和内部链接。
我想在这些链接的右侧添加一个小图标,而不会覆盖其他文本。
我想使用的图标是 icon used on Wikipedia .
例如,这是一个外部链接:
<a href="http://stackoverflow.com">StackOverflow</a>
这是一个内部链接:
<a href="/index.html">home page</a>
我怎样才能只使用 CSS 来做到这一点?
最佳答案
demo
基础知识
使用 :after
我们可以在每个匹配的选择器之后插入内容。
第一个选择器匹配任何以 //
开头的 href
属性。这适用于与当前页面保持相同协议(protocol)(http 或 https)的链接。
a[href^="//"]:after,
这些是传统上更常见的 url,例如 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;
}
关于css - 我如何设计像维基百科这样的外部链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18168286/