外链图标需用a[target="_blank"]::after配合display:inline-block等样式实现，避免仅靠href协议匹配导致误标；非HTTP协议和协议相对链接需单独处理，CSS无法动态读取href值。
外链图标不能只靠 [href^="https://"]
直接写 a[href^="https://"]::after 会把 https://yourdomain.com/page 也标成外链，用户点内部 HTTPS 链接却看到 ↗ 图标，体验错乱。协议前缀本身不带域名语义，纯靠它无法区分内外。
必须配合 :not() 排除本站域名，而且得写全所有可能形式：
-
a[href^="https://example.com"]::after和a[href^="https://www.example.com"]::after都要重置content: "" -
a[href^="//"]::after单独处理——它常用于 CDN 或第三方资源，协议相对链接不带http或https -
[href^="mailto:"]、[href^="tel:"]、[href^="ftp:"]这些非 HTTP 协议也属于出站行为，得各自加图标，不能漏
a[target="_blank"] 是更稳的语义选择器
比起用 href 字符串硬匹配，a[target="_blank"] 是开发者主动声明的跳转意图，稳定、可维护、无障碍友好。它不依赖域名拼写，也不怕 JS 动态改 href。
注意两点：
- 必须带英文双引号：
a[target="_blank"]，写成a[target=_blank]在旧版 Safari 会失效 - 这个选择器只匹配显式写了
target="_blank"的链接，所以构建流程或 CMS 输出时得确保补全该属性（别指望 CSS 自动加）
::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 下模糊、缩放时失真、无法随文字大小变化、基线对不齐、无障碍读取失败。
而 ::after 是唯一能和文字流自然对齐、响应字体缩放、支持 aria-label 注入的方案。如果要用图标字体（如 Font Awesome），记得在 a 元素上统一设好 font-family；如果图方便，Unicode 符号（如 \2197）最轻量可靠。
真正容易被忽略的是：CSS 无法读取 href 值做动态判断，所有“自动”都基于静态属性匹配。如果你的外链没加 target="_blank"，又没覆盖所有域名变体，那图标就注定漏掉一部分——这不是 CSS 的问题，是数据源头没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
