应使用[href^="https://"]配合排除本站域名的:not()规则（如:not([href^="https://example.com"])）来准确标记外部链接，避免将内部HTTPS链接误判为外链；::after伪元素比background-image更可靠，需设置content、vertical-align、display等关键属性，并补充aria-label保障无障碍。
怎么用 [href^="https://"] 匹配真正的外部链接
只靠协议前缀无法准确区分内外链——a[href^="https://"] 会把 https://yourdomain.com/page 也标成外链。必须排除本站域名，否则用户点内部 HTTPS 链接也会看到↗图标。
实操建议：
- 先写更具体的规则，比如
a[href^="https://example.com"]并重置图标（content: ""），再写宽泛的[href^="https://"]规则 - 如果域名有 www 和非 www 两种形式，两条都要写：
[href^="https://www.example.com"]、[href^="https://example.com"] - 别漏掉协议相对链接：
[href^="//"]需单独处理，它既不是 http 也不是 https，但大概率是 CDN 或外链资源 - 注意引号嵌套：CSS 中值必须用双引号，所以不能写
[href^="https://""]，那是语法错误
为什么必须用 ::after 而不是 background-image
background-image 看似简单，但实际会导致图标错位、缩放失真、高 DPI 下模糊，且无法响应文字大小变化。而 ::after 是唯一能和文字基线对齐、随字号缩放、支持无障碍读取的方案。
关键设置缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-flex或inline-block：否则vertical-align和margin失效 -
content: "↗"（或 Unicode、字体图标）：空字符串content: ""不渲染伪元素 -
vertical-align: middle：比top或transform更稳定，适配不同行高 -
margin-left: 4px：数值按设计稿微调，别用padding-right，会缩小可点击区域
a[href^="http"] 为什么容易误判
[href^="http"] 会同时命中 http:// 和 https://，看似省事，但问题明显：
- 漏掉
ftp://、tel:、mailto:这类非 HTTP 协议链接，它们同样属于“出站行为” - 把
http://localhost:3000、http://192.168.1.100这类开发/内网地址也标为外链，干扰判断 - 若页面用了 Service Worker 或 PWA，部分
http://请求可能被拦截并转为内部跳转，视觉提示反而误导用户
更稳妥的做法是分协议写选择器：[href^="mailto:"]、[href^="tel:"]、[href^="ftp:"] 各自加对应图标，不依赖“http”作为唯一标识。
图标可访问性常被忽略的两个硬要求
屏幕阅读器默认不读 ::after 的 content，仅靠图标传达“将离开本站”的信息，对视障用户是黑盒。
必须补上语义层：
- 给链接加
aria-label，例如aria-label="文档下载（PDF）"或aria-label="跳转至第三方网站" - 或者用
title属性作降级（虽然不如aria-label可靠，但兼容老浏览器） - 别依赖 JS 动态注入
aria-label后再加 CSS 规则——CSS 加载快于 JS，图标可能先显示，语义后到，中间存在可访问性缺口
真正难的不是让图标出现，而是让图标出现的同时，语义也到位。很多项目只做了一半。
