最稳妥纯CSS实现小圆点标记是用::before或::after伪元素，需设content: ""、width/height相等、border-radius: 50%、display: inline-block，并推荐使用CSS变量控制颜色/大小/间距以提升可维护性。
用 ::before 或 ::after 添加小圆点最稳妥
纯 CSS 实现小圆点标记，::before 和 ::after 是唯一直接、无侵入的方案。它们不污染 HTML 结构，也不依赖 JS，浏览器兼容性从 IE8+ 就能跑（IE8 仅支持单冒号写法 :before）。
常见错误是直接给元素设 border-radius: 50% 却忘了宽高必须相等，或者没设 display: inline-block 导致伪元素不渲染。
- 伪元素默认是
display: inline，不设宽高或内容时不会显示 - 要成圆点，必须同时设置
width、height、border-radius: 50% - 推荐用
content: ""（空字符串），别写content: "•"—— 后者是字符，大小受字体影响，缩放/换行易错位 - 若需垂直居中，用
position: absolute配合top: 50%+transform: translateY(-50%)，比line-height更可靠
圆点颜色/大小/间距全靠 CSS 变量控制
硬编码 width: 6px、background: #ff6b6b 看似简单，但一改就要全局搜。用 CSS 自定义属性更灵活，尤其在主题切换或多状态标记（如 success/warning/error）场景下。
比如列表项前加红点表示必填，用变量后，只需改一处就能联动所有实例：
立即学习“前端免费学习笔记（深入）”；
.item::before {
content: "";
display: inline-block;
width: var(--dot-size, 6px);
height: var(--dot-size, 6px);
background: var(--dot-color, #e74c3c);
border-radius: 50%;
margin-right: calc(var(--dot-gap, 8px) / 2);
vertical-align: middle;
}
注意 margin-right 别直接写 8px —— 如果圆点本身有 vertical-align: middle，固定像素值在不同字号下容易错位，用 calc() 做比例微调更稳。
IE11 下 ::after 不显示？检查 content 和父容器
IE11 对伪元素的限制很具体：如果父元素是 display: table-cell 或某些 Flex 容器（如 display: flex 且没设 flex-direction），::after 可能完全不渲染；另外，content 值为空字符串 "" 在 IE 中必须带引号，写成 content: '' 才生效（双引号也行，但单引号更安全）。
- 确保父元素有明确的
position: relative（如果伪元素要绝对定位） - 避免在
button或input上直接用伪元素 —— 它们原生不支持::before/::after - IE11 不支持
display: grid容器内的伪元素定位，如有必要，降级为display: block+float - 调试时临时加
outline: 1px solid red到伪元素，确认它是否生成了盒模型
用 box-shadow 模拟多个小圆点太危险
有人用 box-shadow: 4px 0 0 #3498db, 8px 0 0 #2ecc71 画一排点，看起来省事，但实际问题一堆：阴影不响应 transform 缩放、无法单独绑定事件、打印时可能丢失、高对比度模式下常被系统滤掉。
更隐蔽的坑是性能 —— 大量 box-shadow 值会触发重绘（尤其是带模糊半径时），滚动列表里每项都这么干，帧率立刻掉。
- 多圆点场景（如步骤条、状态指示器）老实用真实元素或 SVG
-
box-shadow仅适合静态、单个、装饰性强的点，比如标题旁一个点缀性圆点 - 切记不要用
text-shadow模拟 —— 字符宽度随字体变化，根本对不齐
圆点看着小，但尺寸单位（em/rem/px）、垂直对齐方式、父容器的 font-size 和 line-height 全都会悄悄影响最终位置。调的时候别只看 Chrome，至少拉个 Safari 和 Edge 真机截个图比对。
