CSS:样式外部链接

Question

我想在我的网站(Wordpress)中设置所有外部链接的样式.我正在尝试:

.post p a[href^="http://"]:after

但Wordpress将整个网址放在链接中......那么,我怎样才能设置所有不以http://www.mywebsite.com开头的链接？

谢谢.

Answer 1

使用一些特殊的CSS语法,您可以轻松完成此操作.以下是一种适用于HTTP和HTTPS协议的方法:

a[href^="http://"]:not([href*="example.com"]):after,
a[href^="https://"]:not([href*="example.com"]):after{
    content: " (EXTERNAL)" 
}

您可以点击此处查看此示例.

Answer 2

这种方式显示外部链接ALA维基百科:

a[href^="http"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}

可以在这里找到一个例子:http://jsfiddle.net/ZkbKp/

Answer 3

我结合了 @superological + @Shaz 为我的 Foundation WP 主题做了一些东西......

a[href^="http://"]:not([href*="maggew.com"]):after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}

您可以使用此 HTML 片段在您的网站上进行测试：

<a href="http://gebfire.com" target="_blank">External</a>

这就是我用于自定义图像的内容（如网站图标）

a[href^="http://"]:not([href*="magew.com"]):after {
     content: " " url('/wp-content/uploads/2014/03/favicon.png');    
}

Answer 4

一个简单的规则，不涉及硬编码：

a[href*="//"] { /* make me do stuff */ }

适用于所有计划。具有识别错误输入的内部 URL 的额外好处。对于外部重定向的隐藏内部链接，只需在相对 URL 前加上//.

归功于 Mark Ba​​ttistella，他于 2012 年在 CSS-Tricks 上留下了这段代码。

更新：根据实际使用，我个人发现上述问题存在，因为它对所有绝对链接进行样式设置，这在某些情况下可能导致意外样式（例如，在《勇敢传说》中，当您下载页面以供离线查看时）。我的建议是a[rel*="external"]::after改用并装饰您的外部链接。