准确匹配HTTPS外链需用a[href^="https://"]:not([href^="https://example.com"]):not([href^="https://www.example.com"])::after并设content:"↗"、display:inline-block、vertical-align:middle，排除内网/本地及本站链接，兼顾协议相对链接与无障碍。
为什么不能只用 [href^="http"] 匹配外链图标
这个选择器会同时命中 http:// 和 https://，但你的目标不是“所有 HTTP 协议链接”，而是“非本站的、可能出站的链接”。更关键的是：[href^="http"] 会把 http://localhost:3000、http://192.168.1.100 这类开发/内网地址也标成外链，干扰真实判断；它还漏掉 mailto:、tel:、ftp: 等同样属于出站行为的协议。
真正需要区分的，是「是否走加密通道」和「是否指向外部域」两个维度——而 CSS 选择器本身不解析域名、不判断证书状态，所以它只能靠协议前缀 + 域名排除来逼近目标。
怎么写准确的 HTTPS 外链选择器（含域名排除）
直接用 a[href^="https://"] 会把你自己站点的 https://example.com/about 也标上↗图标。必须配合 :not() 排除。
- 先写具体排除规则（高优先级）：
a[href^="https://example.com"]:not([href^="https://example.com/"]) { content: ""; }——注意末尾斜杠，避免误杀子路径 - 再写通用匹配规则（低优先级）：
a[href^="https://"]:not([href^="https://example.com"]):not([href^="https://www.example.com"])::after { content: "↗"; } - 如果存在 www / 非 www 两种形式，两条
not()都得写，缺一不可 - 别忘了协议相对链接：
a[href^="//"]:not([href^="//example.com"]):not([href^="//www.example.com"])::after，它既不是 http 也不是 https，但常用于 CDN 或第三方资源
为什么 ::after 是唯一靠谱的实现方式
用 background-image 加图标看似简单，但实际会错位、缩放失真、在高 DPI 屏幕模糊，且无法随文字大小缩放或被屏幕阅读器识别。
立即学习“前端免费学习笔记（深入）”；
::after 的关键设置一个都不能少：
-
display: inline-flex或inline-block：否则vertical-align和margin全部失效 -
content: "↗"：空字符串content: ""不渲染伪元素，图标不会出现 -
vertical-align: middle：比top或transform: translateY()更稳定，适配不同行高 -
margin-left: 4px：数值按设计稿微调；千万别用padding-right，会缩小可点击区域 - 补充
aria-label属性（JS 注入或服务端渲染时加），比如aria-label="跳转到外部网站"，保障无障碍
常见错误现象与调试建议
控制台没报错但图标不显示？大概率是以下某一条没做：
-
content值为空或写成了单引号：content: '↗'在 CSS 中非法，必须用双引号：content: "↗" - 伪元素没设
display，导致vertical-align失效，图标跑飞到文字上方或下方 - 选择器权重不够，被其他更具体的规则（比如
a.external::after）覆盖了 - 页面用了 Service Worker 缓存了旧版 CSS，清缓存后仍不生效，需检查 SW 是否劫持了样式请求
最稳妥的验证方式：打开开发者工具 → Elements 面板 → 找到目标 <a></a> 标签 → 右键 “Force state” → 检查 ::after 是否被计算、是否被覆盖、是否设置了 display 和 content。这些细节一旦漏掉，图标就彻底消失，而且很难定位。
