[href^="http"]更可靠，因它只匹配以http开头的链接，避免误伤mailto:、tel:等含://的合法uri；图标须用content:url()或unicode，禁用class名；vertical-align:middle需配合display:inline-block；外部链接必须加aria-label。
为什么[href^="http"]比[href*="://"]更可靠
浏览器对协议的识别不靠“猜”，而是靠字符串匹配。用 [href*="://"] 会误伤 mailto:hello@example.com 或 tel:+8613800138000 这类合法 URI，因为它们也含 ://；而 [href^="http"] 只匹配以 http 开头的链接，排除了所有非 HTTP 协议。更稳妥的做法是组合使用：[href^="http"]:not([href^="https://example.com"]) 排除站内跳转，但注意不要滥用 :not() 嵌套，部分旧版 Safari 不支持多层否定。
图标插入必须用 content: url() 或 Unicode，不能塞 class 名
常见错误是复制 Font Awesome 的 HTML 写法，比如往 content 里写 "fa-external-link"——这只会显示那几个字母。正确做法只有两种：
- 用字体图标：查 Font Awesome 文档拿到对应 Unicode（如
\f35d），再配全font-family: "Font Awesome 6 Free"; font-weight: 900;，缺一不可 - 用 SVG 图标：推荐
content: url("data:image/svg+xml,%3Csvg...%3E");内联写法，避免路径问题；若用外部文件，路径以 CSS 文件位置为基准，不是 HTML 页面
别用 background-image 配 content: "" ——虽然能调色，但需要额外设 width/height 和 display: inline-block，反而增加出错概率。
对齐文字时 vertical-align: middle 必须配 display: inline-block
::before 默认是 display: inline，此时 vertical-align: middle 实际对齐的是行内盒的基线，不是文字中线，图标常显得偏高，尤其和中文混排时。解决方法很简单：
- 加
display: inline-block，它让vertical-align真正按内容中线生效 - 去掉
top、margin-top等像素偏移，这些在缩放或换字体后极易错位 - 如果图标仍略高，可微调
line-height或给父a加padding-bottom: 1px补偿
外部链接图标是纯装饰，必须用 aria-label 补充语义
屏幕阅读器完全读不到 ::before 插入的内容。如果链接文本本身没说明跳转性质（比如只写“GitHub”），用户无法得知这是外部站点。必须显式加 aria-label：
@#@#@#@#@#@#@#@#@#@0
别依赖视觉暗示传递关键信息。这个属性不是可选项，是 WCAG 2.1 AA 级合规要求。很多人加了图标就以为“用户看懂了”，实际对键盘或语音操作用户来说，那个小箭头根本不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
