最可靠方式是通过HTML语义标记rel="external"识别外部链接，而非依赖[href^="http"]等字符串匹配；因CSS无法获取window.location.origin，需在构建阶段或用脚本比对URL.origin与当前源，仅跨源时添加该属性，再用a[rel="external"]::after精准样式化。
如何识别外部链接并避免误标
直接用 a[href^="http"] 会把所有含 http 的链接都匹配，包括同域的 http://example.com/api，甚至页面内带 http 字样的锚点（如 #http-header）。真正要捕获的是跨源链接，即协议+域名与当前页面不一致的链接。
纯 CSS 无法获取 window.location.origin，所以必须靠 HTML 标记辅助。最可靠的做法是：在构建阶段或 CMS 输出时，为外部链接自动添加 rel="external" 属性（这是语义正确且被广泛支持的约定）。
- 服务端渲染或静态站点生成器中，比对
href与当前location.origin，仅当不同时才写入rel="external" - 若只能前端处理，可用一小段脚本批量打标：
document.querySelectorAll('a[href]').forEach(a => { try { const url = new URL(a.href, location.href); if (url.origin !== location.origin) a.rel = 'external'; } catch (e) {} }); - 切勿依赖
href字符串是否包含://或第三方域名关键词——容易漏判或误判
::after 添加图标和文字提示的写法
有了 rel="external"，CSS 就能精准控制：
a[rel="external"]::after {
content: " ↗";
margin-left: 4px;
font-size: 0.8em;
vertical-align: middle;
}
注意几个关键点：
立即学习“前端免费学习笔记（深入）”；
-
content值必须是非空字符串，""不会渲染，" "（空格）可以但不可见；推荐用 Unicode 箭头符号（如↗、→）或 SVG Base64 编码图标 - 避免用
content: " (外部链接)"这类冗长文本——屏幕阅读器会读出，影响可访问性；图标本身已是视觉提示，语义已足够 - 如果要用 SVG 图标，
content: url("data:image/svg+xml,...")是可行方案，但需注意 IE 不支持url()在伪元素中加载 data URI
确保提示不破坏行内布局和可访问性
默认情况下，::after 是 display: inline，但可能因字体、行高或父容器 line-height 导致基线错位或换行。
- 加
vertical-align: middle或text-bottom对齐文字更稳妥 - 若链接是块级或 flex 子项，
::after可能被挤到下一行，此时需给a设置white-space: nowrap - 对键盘用户和屏幕阅读器，这个提示属于装饰性内容，不应被读出。可在
aria-hidden="true"上做文章——但伪元素本身不占 DOM，所以只需确保content不含语义文本即可 - 深色模式下，如果图标颜色依赖
currentColor，记得检查对比度是否达标（至少 4.5:1）
为什么不用 JavaScript 动态插入提示文字
有人倾向用 JS 创建 <span> 插入提示，看似灵活，但带来三个实际问题：
- SEO 友好性下降：搜索引擎可能忽略 JS 注入的内容，而伪元素内容本就不参与索引，反而更干净
- 首次渲染闪烁：JS 执行晚于样式计算，用户可能先看到无提示链接，再“补上”图标，体验割裂
- 维护成本上升：需要监听动态插入的链接（如 SPA 路由切换），而 CSS 规则天然生效，无需额外监听
除非你要做点击前弹出 tooltip 这类交互行为，否则纯视觉提示完全交给 CSS 更稳、更轻、更早生效。
真正麻烦的不是加箭头，而是怎么让每个外部链接都被准确标记——这一步没做对，后面所有样式都白搭。
