使用 CSS 给网站的外链添加背景箭头标识

Question

经常在网站上看到，某些网站外链会在后面显示一个弹出的箭头，提醒用户这个链接非本站链接，这样的效果用正则可以实现，今天就用 CSS3 的选择器来实现。

网站外部链接样式是一种常见的做法，尤其在大多数信息网站比如百度百科等。 作为一个用户，让你什么时候被链接到另一个站外的网页。 许多网站都在服务器端进行检查的外部链接，添加一个 rel=external 的属性值或 external 类的外部链接。 在某些情况下是可行的。 那么用 CSS3 的选择器也可以这么做，请看下面的代码：

a[href^="http://"]:not([href*="wenjiangs.com"]),
a[href^="https://"]:not([href*="wenjiangs.com"]),
a[href^="//"]:not([href*="wenjiangs.com"]){
    /* external link styles
    use :before or :after if you want! */
}

首先你要从链接开始，然后限定域名。 内部链接和外部链接的习惯习惯匹配的匹配比较。 有用的片段和一些能够让你在图书馆的情况下你需要它。

例如如果有一个链接我的网站

http://external.com/?referer=mysite.com

你可以添加任何引用模式你使用另一个模式匹配：

a[href*="?referer"] {
 /* external styles */
}