如何制作HTML未读消息红点数字标记？

本文共计1062个文字，预计阅读时间需要5分钟。

红点要显示9或12，不能依赖+JS+每次改+textContent+再触发生重排，更不宜将数字硬编码进HTML标签内（例如：

常见错误是后端返回 count: 0，前端却没同步清空 data-count，导致红点显示“0”；或者 JS 字符串拼错（如传了 undefined），attr() 就渲染成空字符串，红点变空心圆。务必确保：
• 后端/JS 更新时，同时设置 data-unread 和 data-count
• data-count 值始终为字符串（React 中用 {String(count)}，Vue 中用 :attr="{ 'data-count': String(count) }"）
• 数字超 99 时，统一设为 "99+"，避免宽度撑开错位

overflow: hidden 会吃掉红点，检查父容器的裁剪边界

红点明明写了 top: 0; right: 0; transform: translate(50%, -50%)，却只显示一半，甚至完全消失——八成是父容器设置了 overflow: hidden。导航栏、Tab 标签、折叠菜单这些地方特别爱加这个声明，而红点作为 ::after 伪元素，超出父级范围就会被裁掉。

解决方式只有两个：
• 改父容器：把 overflow: hidden 换成 overflow: visible（如果布局允许）
• 提升层级：给红点加 position: absolute + 更高 z-index，并确保它的**最近非 static 定位祖先**是足够大的容器（比如整个 header），而不是那个带 overflow: hidden 的子模块
• 别依赖 body 或 document.body 做定位锚点——伪元素的 absolute 是相对最近的 relative/absolute/fixed 祖先，不是页面根节点

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

数字红点的宽高不能用 em 或 rem，固定 px 才稳

用 font-size: 0.6rem 控制红点大小？立刻放弃。字体缩放、系统辅助设置、iOS 动态字体都会让 rem 失控，导致红点忽大忽小，甚至压住图标文字。真实项目中，所有能测量的尺寸都该用 px。

推荐组合：
• 红点本体：width: 16px; height: 16px;（含数字时）
• 数字字体：font-size: 10px; line-height: 16px;（保证垂直居中）
• 移动端适配：@media (max-width: 768px) { .badge { width: 12px; height: 12px; font-size: 8px; } }
• 如果数字可能为两位，别靠 padding 自适应——那会导致 “1” 和 “99” 位置不一致；统一用固定宽高 + text-align: center + line-height 居中即可

红点动画要用 opacity + transition，禁用 display: none

想让红点淡入淡出？千万别用 display: none/block 切换——它会触发浏览器重排（reflow），动画卡顿，且无法过渡。正确姿势是用 opacity: 0/1 配合 transition: opacity 0.2s ease，再加 pointer-events: none 防误触。

关键细节：
• 初始状态写 .badge { opacity: 0; transition: opacity 0.2s ease; }
• 显示条件用 [data-unread="1"] .badge { opacity: 1; }，这样纯 CSS 控制，不依赖 JS 类名切换
• 不要给 opacity: 0 的元素加 visibility: hidden——它会让元素彻底退出渲染树，动画就断了
• 若需隐藏时也释放空间（比如节省滚动高度），才考虑用 max-height: 0; overflow: hidden + transition，但绝大多数红点场景不需要

最易被忽略的其实是数据同步时机：红点显隐和数字更新必须原子化。比如用户点开消息列表瞬间，后端返回 { unread: 0, count: 0 }，但 JS 分两次调用更新函数，就可能出现红点闪一下再消失。真正在意体验的地方，得把 data-unread 和 data-count 当作一个状态对来处理。