红点提示应使用position: absolute叠加在relative定位的菜单容器右上角，采用<span class="badge"></span>语义化标记，配合transform: translate(50%, -50%)精准锚定，数字超99显示“99+”并保留aria-label，隐藏时用opacity+transform避免布局跳动，暗色模式需手动适配背景色以满足WCAG对比度要求。
红点提示用 position: absolute 叠加在菜单图标右上角
红点本质是独立的视觉元素，不能靠文字或伪元素硬塞进菜单项内部——否则响应式缩放、多语言宽度变化时容易偏移或遮挡。最稳的方式是给菜单容器设 position: relative，红点用 position: absolute 定位到右上角。
- 红点容器推荐用
<span class="badge"></span>，避免语义污染（不用<div>或<em>） - 关键样式：
top: 0; right: 0; transform: translate(50%, -50%);—— 这样能精准锚定在图标的右上顶点，不随字体大小或 padding 变化跑偏 - 如果菜单项是
<a>或<button>，确保其display是inline-block或flex，否则relative无效
红点数字超过 99 就显示 “99+”，避免布局撑开
纯数字红点在数据激增时会把菜单项挤变形，尤其导航栏空间有限。直接截断加 “+” 是通用解法，且需兼顾可访问性。
- HTML 中用
aria-label="消息：127 条未读"保留完整语义，视觉上只显示99+ - CSS 控制宽度：
min-width: 18px; max-width: 32px; text-align: center;，配合font-size: 10px;防止小屏溢出 - 别用
overflow: hidden简单裁剪——iOS Safari 对绝对定位子元素的裁剪行为不一致，容易漏出数字
Vue/React 里动态控制红点显隐，别用 v-if / display: none
红点消失时如果直接卸载 DOM 或设 display: none，会导致菜单项宽度反复重排，导航栏跳动。应该保持元素存在，仅视觉隐藏。
- 推荐用
opacity: 0; pointer-events: none;+transform: scale(0.8);模拟“隐藏”，同时保留占位 - Vue 中绑定类名：
:class="{ 'badge-hidden': count === 0 }"，CSS 写.badge-hidden { opacity: 0; transform: scale(0.8); } - React 同理，避免
{count > 0 && <span classname="badge">...}</span>这种条件渲染
暗色模式下红点颜色必须手动适配，不能只靠 color-scheme: auto
浏览器的 color-scheme 不会影响自定义红点背景色，#ff4d4f 在深灰背景上对比度不足，用户根本看不见。
立即学习“前端免费学习笔记（深入）”；
- 明确写两套颜色：
background-color: #ff4d4f;和@media (prefers-color-scheme: dark) { .badge { background-color: #ff6b6b; } } - 别依赖
currentColor——红点不是文字，用文字色当背景会严重降低可读性 - 检查 WCAG 对比度：浅色背景下红点文字至少 4.5:1，深色背景建议用亮白字 + 更饱和的红底
transform: translate() 的锚点偏移和暗色模式下的颜色硬编码。 
