最稳做法是用 a[target="_blank"]::after 添加外链图标。它基于开发者明确声明的跳转意图，避免 href 字符串匹配的误判与维护难题；伪元素需设 display: inline-block、vertical-align: middle 和非空 content 才能正确对齐渲染。
直接用 a[target="_blank"]::after，别碰 href 字符串匹配——这是最稳、最可维护、无障碍友好的做法。
为什么必须用 a[target="_blank"] 而不是 [href^="https://"]
纯靠协议前缀会把 https://yourdomain.com/page 也标成外链，用户点内部 HTTPS 链接却看到 ↗ 图标，体验错乱。CSS 的 :not() 只能写死域名，漏掉 www、dev. 或协议相对链接（//cdn.example.com）就失效。而 a[target="_blank"] 是开发者主动声明的跳转意图，不依赖字符串解析，也不怕 JS 动态改 href。
注意两点：
-
a[target="_blank"]必须带英文双引号，写成a[target=_blank]在旧版 Safari 会完全不生效 - 这个选择器只匹配显式写了
target="_blank"的链接，CMS、富文本编辑器或构建流程得确保输出时补全该属性
::after 图标必须设 display: inline-block 才能对齐
很多人写了 content: "↗" 却看不到图标，或者图标飘在文字上方、换行错位——根本原因是没给伪元素设显示模式。::after 默认是 inline，无法控制尺寸、垂直对齐和 margin。
立即学习“前端免费学习笔记（深入）”；
必须加这几条：
-
display: inline-block（或inline-flex），让vertical-align和margin生效 -
vertical-align: middle，比top或transform更稳，适配不同行高 -
margin-left: 4px，数值按设计微调；别用padding-right，会缩小可点击区域 -
content不能为空，哪怕只是content: " "，否则伪元素不渲染
别用 background-image 加外链图标
看似简单，但实际问题一堆：
- 高 DPI 下模糊、缩放时失真
- 无法随文字大小变化，基线永远对不齐
- 无障碍读取失败（屏幕阅读器看不见）
- 不能注入
aria-label，也无法用字体缩放控制图标大小
而 ::after 是唯一能和文字流自然对齐、响应字体缩放、支持 aria-label 注入的方案。如果要用图标字体（如 Font Awesome），记得在 a 元素上统一设好 font-family；图方便就直接用 Unicode 符号，比如 content: "\2197"（↗）。
安全跳转不能只靠 target="_blank"
仅加 target="_blank" 存在 tabnabbing 风险：新开页可通过 window.opener.location 劫持原页。必须同时加 rel="noopener"——这个属性不能用 CSS 添加，必须写在 HTML 里或由构建流程/编辑器自动注入。
真正可靠的外链处理链条是：HTML 写对 target 和 rel → CSS 用 a[target="_blank"]::after 加图标 → 不依赖 href 字符串做逻辑判断。
最容易被忽略的是：伪元素的 content 值一旦为空（包括未声明），整个 ::after 就不会渲染；而 display 和 vertical-align 缺一不可，否则图标位置完全失控。
