空链接需警告提示，因其损害可访问性（屏幕阅读器误读）、影响seo与自动化审计；通过css伪元素::after添加显眼视觉标记（如⚠），匹配href=""、href="#"、href^="javascript:"三类写法，仅限开发环境使用，且不可替代根本修复。
空链接为什么需要警告提示
空链接（@#@#@#@#@#@#@#@#@#@0 内部有文本节点（哪怕只有空格），不算 :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 事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
