不能只写[href^="http"]，因其会误匹配mailto:http@example.com和/article?ref=https://xxx等非外链，且完全不匹配//cdn.example.com等protocol-relative url，必须拆分为[href^="http://"]和[href^="https://"]两个明确规则。
直接用 a[href^="http://"], a[href^="https://"]::before 是最简明、兼容性最好的方案，但必须同时处理 protocol-relative URL（//example.com）和混合内容风险，否则图标会漏掉或链接失效。
为什么不能只写 [href^="http"]
这个选择器看似省事，实际会误伤两类关键链接：mailto:http@example.com 和 /article?ref=https://xxx —— 它们 href 值里含 http，但根本不是外部链接。更严重的是，它完全不匹配 //cdn.example.com/style.css 这种 protocol-relative 外链，而这类链接在 HTTPS 站点中非常常见。浏览器不解析协议头，只做字符串前缀匹配，所以必须拆开写两个明确的规则。
::before 图标错位、飘高？优先调 vertical-align，别碰 top
默认 ::before 是 inline 元素，按基线（baseline）对齐，而文字有 descender（如 g、y 的下延），图标没有，视觉上就“浮”在文字上方。解决方式很简单：
- 加
vertical-align: middle—— 90% 场景够用，无需父元素设line-height - 如果仍偏移，把
display改成inline-block，再配vertical-align: middle - 绝对定位是备选：父
a加position: relative，::before设position: absolute; top: 50%; transform: translateY(-50%)，但会增加布局耦合
图标显示了但点不开？先看控制台有没有 Mixed Content 错误
当页面是 https://，而链接是 http://example.com 时，现代浏览器会静默拦截请求，图标照常渲染，但点击无响应。这不是 CSS 问题，而是安全策略。排查步骤：
- 打开 DevTools → Console，刷新页面，看是否有红色
Mixed Content警告 - 检查该链接的完整
href值，确认协议是否一致 - 若需兼容旧链接，服务端重定向或 JS 动态补协议比前端硬扛更可靠
无障碍必须加 aria-hidden="true"
伪元素插入的图标（比如 content: "↗" 或 Font Awesome 的 \f35d）不是语义内容，但屏幕阅读器默认会把它读作“右箭头”或“空格”，干扰用户。唯一稳妥做法是在 HTML 中给链接加 aria-hidden="true" 属性，而不是依赖 CSS 的 speak: none（已废弃且支持差）。注意：这个属性要加在 <a></a> 上，不是伪元素里——伪元素本身无法挂 aria 属性。
真正麻烦的从来不是怎么画出那个小图标，而是怎么让它既准确出现、又不破坏链接行为、还不打扰辅助技术用户。protocol-relative URL 和混合内容这两点，最容易被跳过，等上线后才发现部分外链图标缺失或失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
