a[href^="http"]并不比a[target="_blank"]更可靠——前者因大小写敏感、漏HTTPS和//协议、误判含http子串的内链而不可靠；后者结合语义化标记（如rel="external"）或后端自动标注才真正可靠。
为什么 a[href^="http"] 比 a[target="_blank"] 更可靠？
只靠 target="_blank" 判断外链不可靠——很多内链（比如跳转到同域子站 https://blog.example.com）也设了这个属性，而真正的外链（如 https://google.com）可能没设。更稳妥的方式是用属性选择器匹配协议开头：a[href^="http"] 能捕获所有以 http 或 https 开头的链接；但要注意排除同域链接，否则会误标。
实际做法是组合使用：a[href^="http"]:not([href*="example.com"])（把 example.com 替换为你的域名）。如果站点支持多级域名（如 shop.example.com），建议用 :not([href*="example.com"]):not([href*="www.example.com"])，或改用 JS 动态判断更稳妥。
如何用 ::after 插入 SVG 图标而非 Unicode 字符？
Unicode 字符（如 \2197）缩放模糊、颜色难统一、无法响应式适配。直接嵌入 inline SVG 更可控，且能继承文字颜色、支持 currentColor。
- 把 SVG 写进
content属性时，需先 URL 编码：把变成 <code>%3C，>变成%3E，空格变%20，双引号变%22 - 推荐精简版外部图标 SVG（如 Feather Icons 的
external-link）：宽高设为1em，路径 fill 用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");
如何避免图标和文字间距错乱或换行？
::after 默认是 inline 元素，容易被文字换行挤到下一行，或紧贴文字导致拥挤。必须显式控制布局行为。
立即学习“前端免费学习笔记（深入）”；
- 给
a设置position: relative，再给::after设position: absolute+right: -12px+top: 50%+transform: translateY(-50%)，就能稳定右对齐且垂直居中 - 加
margin-left: 4px（不要用margin-right）可让图标与文字保持呼吸感；若用绝对定位，就不用 margin，靠right值调节 - 务必设置
pointer-events: none在::after上，否则图标区域会拦截鼠标事件，导致点击失效
IE 和旧版 Safari 不支持 url() 里写 data URI 怎么办？
IE 完全不支持 content: url(...) 中的 data URI；iOS Safari ≤ 12 对 base64/data URI 支持也不稳定。这时候 fallback 方案不是“降级显示文字”，而是改用伪元素 + background-image。
- 放弃
content: url(...)，改用background-image: url(...)+display: inline-block+ 固定宽高 - 把 SVG 存为独立文件（如
/icons/external.svg），然后写：background: url(/icons/external.svg) no-repeat right 2px / 1em 1em; - 注意：
background-position的right 2px是相对于伪元素自身右边界，不是相对于链接文字；需配合padding-right预留空间
真正麻烦的不是写法，而是判断「什么时候该用 data URI，什么时候该切 background」——如果你的项目还要求兼容 IE11，那就别碰 content: url(data:...)，直接上 background 方案。现代项目（Chrome/Firefox/Safari ≥ 13）用 data URI 更干净，无需额外请求。
