用属性选择器[href^="http"]可标记以http开头的链接，但会同时匹配http://和https://，无法准确区分内外链；真正可靠的判断需JS或服务端实现，CSS仅适合粗粒度视觉提示。
如何用 CSS 识别并标记以 http 开头的链接
直接看结论：用属性选择器 [href^="http"] 可匹配所有 href 以 http 开头的 <a> 元素，但要注意它会同时命中 http:// 和 https://，且无法区分内外链（比如同域的 http://example.com/api 也会被标上“外部”图标）。
真正可靠的内外链判断必须靠 JS 或服务端逻辑，CSS 层面只能做粗粒度提示。如果你只是想给明显外跳的链接加个图标，这个选择器够用，但别指望它 100% 准确。
为什么不用 [href*="http"] 或 [href$=".com"]
这类写法看似直观，实际问题很多：
-
[href*="http"]会误伤href="javascript:httpAlert()"或href="/static/http-demo.html"这类含子串但非协议开头的值 -
[href$=".com"]完全不可靠——内网域名、本地路径、甚至锚点如#section-com都可能撞上 - 更糟的是，
mailto:、tel:、ftp:等协议也会被漏掉，而你可能只想标 HTTP(S) 外链
添加外部图标的具体写法（含兼容性处理）
推荐用伪元素 + 背景图或 Unicode 字符，避免插入冗余 HTML。关键点是：显式排除 https:// 同域链接（如果需要），并确保图标对齐自然：
立即学习“前端免费学习笔记（深入）”；
code a[href^="http"]::after {
content: " ↗";
font-size: 0.8em;
margin-left: 2px;
vertical-align: middle;
}
/* 如果要排除当前域名（需 JS 配合生成 class） */
code a.external::after {
content: " ↗";
}注意：::after 默认是 inline 元素，vertical-align: middle 能避免图标把行高撑开；如果用背景图，记得设 display: inline-block 和合适尺寸。
容易被忽略的细节和坑
这些点不处理，图标可能错位、重复、或在屏幕阅读器里造成干扰：
- 没有加
aria-hidden="true"的伪元素图标，会被读屏软件朗读成“空格、右箭头”，影响无障碍体验 -
[href^="http"]不匹配//example.com这种 protocol-relative URL，它没协议头，但仍是外链 - 如果页面本身是
https，而链接是http://，现代浏览器会拦截混合内容，图标显示了但链接点不开——得先检查控制台有没有Mixed Content错误 - 图标字体（如 Font Awesome）需确保跨域加载正常，否则 fallback 到 Unicode 更稳妥
真正在意准确性的话，光靠 CSS 做不了内外链判断。它只是视觉提示层，逻辑边界一定要由 JS 拦一下：比如比对 location.origin 和 a.hostname，再加 class 控制样式。
