小圆点必须设置 content: "" 才能显示，且需 display: inline-block 或 block 才能生效宽高和 border-radius；常用写法包括设 width/height、background-color、border-radius: 50%、vertical-align: middle 及 margin 定位；适配建议用 em/rem 单位、统一父级 line-height；避免溢出需检查 overflow 和 position；动态显隐推荐 data-dot 属性配合 display: none；主题切换应使用 css 自定义属性控制颜色。
span::before 怎么画出小圆点
直接写 ::before 但没设 content，圆点根本不会出现；content: "" 是必须的起点。伪元素默认是 inline，不设 display: block 或 inline-block，宽高、border-radius 都无效。
典型写法：
span.dot::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background-color: #ff4757;
border-radius: 50%;
vertical-align: middle;
margin-left: 4px;
}
-
vertical-align: middle比baseline更稳，避免和文字上下错位 - 用
em或rem单位（比如width: 0.375em）比固定px更适配字体缩放 - 如果 span 本身有
line-height，伪元素会受其影响，建议统一控制父级行高
为什么小圆点位置总偏移、或被裁掉
常见现象：圆点飘到行外、被父容器切掉一半、hover 时消失——大概率是定位或溢出问题。
- span 默认
display: inline，不支持position: absolute；若想精确定位（比如贴右上角），得先设display: inline-block或relative - 父容器（如
div或button）设了overflow: hidden，圆点会被裁剪；检查 computed 样式里overflow是否为hidden - 用
transform: translate(-50%, -50%)配合top: 0; right: 0可锚定右上顶点，但前提是 span 有position: relative
data- 属性 + 伪元素动态控制圆点显隐
静态圆点用 content: "" 就够了，但要根据状态显示/隐藏（比如未读消息数为 0 时隐藏），就得靠 data-dot 驱动 CSS。
span[data-dot="0"]::before {
display: none;
}
span[data-dot]:not([data-dot="0"])::before {
content: "";
/* 其他样式同上 */
}
- HTML 写成
<span data-dot="3">消息</span>，JS 改dataset.dot值即可触发显示逻辑 - IE 不支持
attr(data-dot)用于content，所以别写content: attr(data-dot)来显示数字——只用来做开关判断更安全 - 避免用
visibility: hidden，它仍占渲染空间；display: none才真正移除布局影响
圆点颜色和尺寸怎么随主题自动切换
硬编码颜色（如 #ff4757）不利于主题切换；用 CSS 自定义属性更灵活。
span.dot {
--dot-color: var(--primary, #007bff);
}
span.dot::before {
background-color: var(--dot-color);
}
- 在 :root 或组件作用域里定义
--dot-color，换主题只需改变量值 - 不要给伪元素直接设
color——它不继承 color，background-color才是正解 - 圆点太小（0.3em（约 4.8px @16px 基准）
实际项目里最容易漏的是：span 没加 display: inline-block 就硬套 position，或者父容器默默开了 overflow: hidden。这两个点一卡，圆点就“失踪”得毫无征兆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
