红点数字必须用 css content: attr(data-count) 动态读取，确保 data-count 为字符串、超99显示“99+”，避免 overflow: hidden 裁剪、禁用 rem 尺寸、用 opacity 过渡动画，并原子化同步 data-unread 与 data-count。
红点数字必须用 content: attr(data-count)，别写死在 HTML 里
红点要显示“9+”或“12”，不能靠 JS 每次改 textContent 再触发重排，更不该把数字硬写进 HTML 标签里（比如 <span class="badge">3</span>）。真正轻量、可维护的做法是用 CSS 的 attr() 函数读取属性值：content: attr(data-count)。前提是 HTML 元素上得有对应属性，比如 <div class="icon" data-unread="1" data-count="5"></div>。
常见错误是后端返回 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 当作一个状态对来处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
