直接写 content: attr(href) 拿不到域名，因 attr() 仅原样输出 href 值，不解析协议或提取 hostname；CSS 无字符串处理能力，无法截取或判断内外链。
为什么直接写 content: attr(href) 拿不到域名
因为 attr() 只做原样输出，不解析、不截取、不判断协议或域名。写 content: attr(href) 后，你看到的要么是空值（href 未设置），要么是完整 URL（如 https://example.com/page 或 /about），根本没法区分内外链。更麻烦的是，CSS 无法对字符串做任何处理——没有 substring()，没有正则，也没有 hostname 属性可读。
a[href^="https://"] 为什么不能单独用
它会把所有 HTTPS 链接都标成“外部”，包括你自己的 https://yoursite.com。必须配合 :not() 排除：
- 写两条规则：先重置本站链接（
a[href^="https://yoursite.com"]::after, a[href^="https://www.yoursite.com"]::after { content: ""; }） - 再匹配所有 HTTPS 外链（
a[href^="https://"]::after） - 别漏掉协议相对链接：
a[href^="//"]::after单独处理，它常见于 CDN 资源或跨域 API - 避免写
[href^="http"]—— 它会误伤http://localhost和内网地址，且漏掉mailto:、tel:等合法出站协议
::after 图标必须设 display 和 vertical-align
否则图标会掉线、错位、点击区域变小。关键点就三个：
- 链接本身建议设
display: inline-flex或display: inline-block（仅当需要精确控制伪元素基线时） -
::after必须有非空content，比如content: "↗";或content: "\2197";（Unicode ↗） -
vertical-align: middle比top或transform更稳，适配不同行高和字体大小 -
margin-left: 4px控制间距，别用padding-right—— 会压缩可点击区域
图标不是装饰，得让屏幕阅读器“看不见”
纯视觉图标如果被读出来（比如“↗”被念成“右上箭头”），会干扰辅助用户。最稳妥做法是：
立即学习“前端免费学习笔记（深入）”；
- 给链接加
aria-label，明确说明用途，例如：<a href="https://example.com" aria-label="访问外部网站：example.com">Example</a> - 不要依赖
aria-hidden="true"在伪元素上——它不生效，伪元素本身不能挂属性 - 避免用
content: url()插图，SVG 图标需转为 data URI 或用字体图标，否则高 DPI 下模糊、缩放失真
data-external）或构建时注入来完成，运行时 JS 补充反而容易触发重绘异常。 
