应使用组合否定选择器或js动态判断外链，配合inline svg图标与inline-flex布局确保兼容性与一致性。
用 a[href^="http"] 选外链，但必须排除同域链接
只靠 a[href^="http"] 会把 https://blog.example.com 这类子站也当外链标错。它大小写敏感，不识别 HTTP://，还可能误判 https://example.com/article?ref=http://bad.com 这种含子串的内链。
实际要组合否定选择器：a[href^="http"]:not([href*="example.com"]):not([href*="www.example.com"])。如果站点有多个主域（比如 example.cn），得逐个加 :not([href*="..."])。
更稳妥的做法是后端渲染时加 rel="external" 属性，或前端用 JS 动态判断 new URL(link.href).origin !== location.origin，再统一加 class。
用 ::after 插 SVG 图标，别用 Unicode 字符
Unicode 字符（如 97）在高分屏缩放模糊、颜色难同步、无法响应式适配。直接嵌 inline SVG 更可控，且能继承 currentColor。
SVG 必须 URL 编码后塞进 content: url("data:image/svg+xml,...")：
→ <code>%3C，>→%3E，空格 →%20，双引号 →%22- 宽高设为
1em，fill或stroke设为currentColor - 完整示例：
content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1em'%20height='1em'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%3E%3Cpath%20d='M11%2017L15%2017M15%2017L15%2013M15%2017L10.5%2012.5M15%207H8.5C7.11929%207%206%207.87539%206%209V15C6%2016.1246%207.11929%2017%208.5%2017H12'%2F%3E%3C/svg%3E");
避免图标换行、点击失效、iOS Safari 兼容问题
::after 默认是 inline 元素，文字换行时图标容易被挤到下一行，或紧贴文字导致拥挤。必须显式控制布局：
- 加
display: inline-block或display: inline-flex - 用
vertical-align: middle对齐文字基线 - 加
margin-left: 0.25em保持呼吸感；若用绝对定位就别加 margin，靠right和top: 50%微调 - 绝对定位时记得加
pointer-events: none，否则图标区域会拦截鼠标事件，导致点击失效 - iOS Safari ≤ 12 对 data URI 支持不稳定，fallback 方案不是显示文字，而是改用
background-image+ 伪元素固定尺寸
图标和文字间距错乱，本质是布局模型没理清
很多人以为加个 margin 就完事，结果在不同字号、行高、字体下表现不一。真正关键的是明确 ::after 的盒模型行为——它默认 inline，但 inline 元素对 vertical-align、line-height、换行极其敏感。
最省心的组合是：display: inline-flex + align-items: center + margin-left，这样既避开换行干扰，又不用手动算 top 偏移量。但要注意，inline-flex 在旧版 IE 不支持，如需兼容就得退回到 inline-block + vertical-align。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
