空链接需警告提示，因其损害可访问性（屏幕阅读器误读）、影响SEO与自动化审计；通过CSS伪元素::after添加显眼视觉标记（如⚠），匹配href=""、href="#"、href^="javascript:"三类写法，仅限开发环境使用，且不可替代根本修复。
空链接为什么需要警告提示
空链接（<a href="#">、<a href="javascript:void(0)">、<a href="">）在可访问性和语义上都是问题：屏幕阅读器会读出“链接”，但点击无响应；SEO 工具如 Lighthouse 会报“链接目的不明确”；自动化审计脚本（如 axe-core）也会标记为 link-in-text-block 或 valid-href 违规。用 ::after 添加视觉警告，是开发阶段快速暴露问题的低成本手段，不修改 HTML，也不依赖 JS。
a[href=""], a[href="#"], a[href^="javascript:"]::after 的匹配逻辑
这类选择器必须精确对应空链接的三种典型写法，但要注意浏览器解析差异：
-
a[href=""]匹配href=""（注意：部分旧版 Safari 对空字符串属性匹配不稳定，建议保留） -
a[href="#"]匹配锚点跳转失败风险高的写法，尤其当页面没对应id时 -
a[href^="javascript:"]用属性前缀匹配，覆盖javascript:void(0)、javascript:;等变体 - 不要写
a:not([href])——它匹配的是完全没写href属性的<a>，属于无效标签，不是“空链接” - 避免用
:empty，<a href="#"></a>内部有文本节点（哪怕只有空格），不算:empty
警告样式必须显式声明 color 和 background
伪元素默认是 inline 级，且在高对比度模式（Windows/Chrome 高对比主题）、暗色模式或某些缩放设置下，color 和 background 极易被系统强制重置为透明或不可见。只靠 content: "⚠" 不够：
- 必须设
color: #d32f2f（深红）+background: #fff8f8（浅红底），确保足够对比 - 加
border: 1px solid #ffcdd2提供轮廓，防止背景被抹掉后图标消失 - 用
display: inline-block才能生效padding和border-radius，否则文字紧贴链接文本 - 加
font-size: 10px和line-height: 1控制高度，避免撑开行高影响布局 - 别用
opacity: 0.8模拟弱化——高对比度模式下 opacity 会被忽略，直接失效
如何避免干扰正常功能和测试环境
这个样式只用于开发/审计阶段，上线前应移除。但若需保留，得防误伤：
立即学习“前端免费学习笔记（深入）”；
- 用
body[data-env="dev"] a[href=""]::after这类带环境标记的选择器，避免污染生产环境 - 排除已加
aria-hidden="true"或data-skip-audit的链接：a[href=""]:not([aria-hidden="true"]):not([data-skip-audit])::after - 不要用
z-index——警告图标只是视觉提示，不该遮挡下拉菜单、tooltip 等真实交互层 - 如果项目用了 CSS-in-JS（如 Emotion、Styled Components），需确认其是否支持属性选择器 +
::after组合，部分旧版本会剥离href属性选择器
最常被忽略的一点：伪元素警告不能替代修复。它只是把“这里有问题”打在脸上，但不会阻止用户点击或绕过可访问性检测。真正在意质量的团队，会把这条 CSS 当作每日构建的 lint 规则——看到警告图标，就得立刻改 href 或补 role="button" + tabindex + click 事件。
