纯CSS无法添加target="_blank"属性，因为::after是伪元素，仅渲染视觉内容而不修改DOM或跳转逻辑；真正控制跳转的是HTML中的target属性，必须写在标签内或由JS注入。
纯 CSS 无法给链接自动添加 target="_blank" 属性——这是 HTML 属性，::after 只能插入视觉内容，不能修改 DOM 结构或行为。
为什么不能用 ::after 添加 target="_blank"
::after 是伪元素，只渲染在页面上，不参与 HTML 解析、不触发浏览器跳转逻辑。你看到的“图标”是装饰，不是属性；点击它不会新开标签页，也不会改变链接行为。真正控制跳转的是 target 这个 HTML 属性，必须写在 <a> 标签里，或由 JS 注入。
外链图标该用哪种选择器匹配
优先用 a[target="_blank"]，而不是靠 href 协议判断：
-
a[href^="http"]会误命中href="https://yourdomain.com"（其实是内链） -
a[href^="https://"]:not([href*="yourdomain.com"])看似聪明，但 CSS 无法做域名白名单动态排除，not()里不能用 JS 表达式，只能写死字符串，维护成本高且易漏 -
a[target="_blank"]是开发者主动声明的语义意图，稳定、可预测、SEO 和无障碍友好 - 注意写法：必须带英文引号，
a[target="_blank"]，漏掉或写成a[target=_blank]在部分浏览器（如旧版 Safari）会失效
::after 加图标的关键样式细节
图标能对齐、不撑乱行高、适配各种字体大小，靠这几个点：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-flex或display: inline-block必须加在a上，否则vertical-align和margin对::after失效 -
content不能为空，哪怕只写content: " "，否则伪元素不渲染 -
vertical-align: middle或vertical-align: super配合font-size: 0.8em才能自然居中，避免图标把整行拉高 - 如果用图标字体（如
iconfont），要确保a[target="_blank"]的font-family正确继承，否则 Unicode 符号（如\2197）更轻量可靠 - 别用
background-image+padding-right：高 DPI 下模糊、缩放时失真、无法和文字流对齐
安全跳转不能只靠 target="_blank"
现代浏览器虽默认启用 noopener，但显式写上更稳妥：
- 仅加
target="_blank"存在 tabnabbing 风险：新开页可通过window.opener.location劫持原页 - 必须同时加
rel="noopener"（rel="noreferrer"非必需，会丢失 referrer） - 这个
rel属性不能用 CSS 添加，必须写在 HTML 里或由构建流程/编辑器自动注入 - 如果你用的是 CMS 或富文本编辑器（如 Draft.js），得在输出环节统一补全，而不是指望 CSS
真正可靠的外链处理链条是：HTML 写对 target 和 rel → CSS 用 a[target="_blank"]::after 加图标 → 不依赖 href 字符串做逻辑判断。容易被忽略的是：图标对齐依赖父级 display 值，而安全跳转必须靠 HTML 属性，CSS 什么都干不了。
