小红点用绝对定位+伪元素最稳妥，按钮需设position:relative，伪元素用top:0;right:0;transform:translate(50%,-50%)精确定位，显隐通过opacity和pointer-events控制，兼顾动画、可访问性与高对比度模式适配。

小红点用绝对定位 + 伪元素最稳妥

直接在按钮上加 ::after 伪元素，比额外套一层 <span></span> 更轻量，也避免干扰可访问性。关键是把小红点“钉”在右上角，不随按钮内容变化偏移。

常见错误是只设 position: absolute 却忘了给父容器加 position: relative，结果小红点相对整个页面定位，飘到屏幕角落。

• 按钮必须设置 position: relative
• 伪元素用 content: "" + position: absolute
• 右上角定位推荐：top: 0; right: 0; transform: translate(50%, -50%)（比 top: -4px; right: -4px 更适配不同字号）
• 小红点尺寸建议用 min-width 和 min-height（如 6px），避免空通知时塌缩

动态控制小红点显隐要靠 class 切换

不要用 display: none 控制伪元素显隐——它会破坏过渡动画，且无法做渐变淡出。正确做法是用透明度 + 指针事件开关。

典型场景：用户点击后清空未读数，小红点应淡出而非突兀消失。

立即学习“前端免费学习笔记（深入）”；

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 默认状态加 opacity: 1; pointer-events: auto
• 隐藏时用 opacity: 0; pointer-events: none
• 务必加 transition: opacity 0.2s ease-in-out
• JS 中通过切换 class（如 has-unread）来触发动画，别直接操作 style

无障碍和高对比度模式下不能只靠颜色

纯红色小红点在色觉障碍用户或 Windows 高对比度模式下可能完全不可见。必须补充视觉线索。

浏览器开启高对比度模式后，自定义颜色会被强制替换，background-color: red 可能变成黑色或透明。

• 给伪元素加 border: 2px solid currentColor，利用文字色兜底
• 配合 content: "•"（实心圆点字符），即使背景失效仍有符号
• 如果按钮有 aria-label，确保包含未读状态，例如 aria-label="消息（3条未读）"
• 避免依赖 box-shadow 做红点，高对比度模式下常被忽略

React/Vue 中注意响应式更新时机

框架里直接改状态触发重渲染没问题，但要注意：小红点的显隐 class 必须和数据严格同步，否则会出现“已读了但红点还在”的错觉。

容易踩的坑是异步清空未读数后，DOM 还没更新就执行了动画类切换。

• Vue 中用 $nextTick 确保 class 在 DOM 更新后添加/移除
• React 中避免在 useEffect 里直接操作 DOM 类名，优先用 state 驱动 class 名
• 若用数字徽标（如 “9+”），注意字体大小和 min-width 匹配，防止数字变多时撑开按钮

小红点看着简单，真正难的是在各种缩放、高对比度、屏幕阅读器、动画中断等边界情况下都保持可用——颜色只是表象，定位逻辑、可访问性补丁、框架更新节奏才是实际卡点。