2025年5月22日 星期四 乙巳(蛇)年 二月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

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

时间:12-14来源:作者:点击数:20
CDSY,CDSY.XYZ

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

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

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

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

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

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

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

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

  • a[href*="?referer"] {
  • /* external styles */
  • }
CDSY,CDSY.XYZ
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐