通过css伪元素 ::before 为外部链接自动添加跳转小图标，核心做法是利用属性选择器 [href^="http"] 匹配以 http 开头的 <a></a> 标签，并在其中插入一个背景图片。具体实现时，需设置 content: "" 以生成伪元素，配合 background-image 引入图标，并通过 display: inline-block、width、height 和 vertical-align 控制其尺寸与位置，使其紧随链接文本之后。
如何编写匹配外部链接的CSS选择器并定义图标样式？
要区分内部链接与外部链接，最直接的方法是使用通配符前缀选择器 [href^="http"]。该选择器会选中所有 href 属性值以 http 开头的锚点元素。在定义样式时，关键在于伪元素的布局属性。必须将 display 设为 inline-block 才能应用宽高，同时使用 margin-left 与文本保持间距，并用 vertical-align 调整垂直对齐方式，确保图标与文字基线或顶部对齐美观。
.external-link::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-left: 4px;
vertical-align: middle;
background-image: url('icon-external.svg');
background-size: contain;
background-repeat: no-repeat;
}上述代码定义了基础的外部链接图标样式。假设页面中存在如下HTML结构：
访问示例网站
渲染后，文本“访问示例网站”右侧会出现一个12x12像素的SVG图标。若希望图标颜色随主题变化，可使用 filter 或 mask 属性替换 background-image，但基础方案中直接使用图片路径最为通用且兼容性好。
立即学习“前端免费学习笔记（深入）”；
如何处理不同协议（如HTTPS）及相对链接的排除逻辑？
虽然 [href^="http"] 能匹配 http 和 https，但在实际项目中，可能需要更精细的控制，例如排除邮件链接 mailto: 或电话链接 tel:。此时可以结合否定伪类 :not() 进行过滤。此外，对于相对链接（如 /about）或根相对链接（如 //example.com），该选择器天然不会匹配，因此无需额外处理。若需支持 ftp: 等协议，可扩展选择器或使用 [href^="http"] 配合 [href^="ftp"]。
.external-link:not([href^="mailto:"]):not([href^="tel:"])::before {
/* 继承上述样式 */
}此增强版选择器确保了只有真正指向网页资源的链接才会显示外部图标。例如，<a href="mailto:test@example.com">发送邮件</a> 不会触发伪元素，而 <a href="https://secure-site.com">安全站点</a> 则会正常显示。这种组合选择器写法提高了样式的精确度，避免了误标非HTTP协议的链接。
当链接内容为空或仅包含图标时，伪元素布局会发生什么变化？
如果 <a></a> 标签内没有文本内容，或者内容完全由其他块级元素构成，伪元素 ::before 依然会生成，但其布局行为可能受父级 display 属性影响。若 <a></a> 默认为 inline，伪元素作为 inline-block 会尝试与相邻行内内容对齐。若链接为空，伪元素仍会占据设定的宽度和高度，可能导致视觉上的空白占位。为避免这种情况，可添加 min-width 或检查 text-indent，但通常建议在HTML层面确保链接有可见内容，或通过 visibility: hidden 隐藏无内容的伪元素。
