html无原生圆圈数字标签，需用css counter-increment配合::before伪元素生成可自动递增的带圆圈序号，支持自定义样式、跨容器复用、多级嵌套及响应式适配，避免unicode硬编码导致的序号错乱与兼容性问题。
圆圈数字在HTML里没有现成标签，得用CSS画
直接写 <ol type="1"></ol> 只能出普通数字，带圆圈的「① ② ③」不是HTML原生支持的列表样式。浏览器默认不渲染 Unicode 圆圈数字（如 ①）为自动递增序列，硬写死会失去序号逻辑——比如删掉第2项，后面不会自动重排。
真正可控的做法是用 ol + CSS 的 counter-reset 和 counter-increment 配合 ::before 伪元素生成圆圈效果：
ol.circle-list {
counter-reset: item;
list-style: none;
padding-left: 0;
}
ol.circle-list li {
counter-increment: item;
position: relative;
padding-left: 32px;
}
ol.circle-list li::before {
content: counter(item);
display: inline-flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: #007bff;
color: white;
font-size: 12px;
margin-right: 8px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
别用 Unicode 字符硬编码序号
像 <li>① 第一名</li> 看似简单，但实际埋雷：
- Unicode 圆圈数字只到 ⑳（20），超过就只能手拼或换方案
- 复制粘贴时容易混入全角空格、不可见字符，导致布局错位
- 无法响应式缩放——小屏下圆圈可能被截断，而 CSS 生成的可以设
em或rem单位自适应 - 无障碍访问（screen reader）可能读成“带圈一”，而非“第一”
移动端圆圈对齐容易偏移
用 position: absolute 定位圆圈时，top: 50% + transform: translateY(-50%) 是最稳的垂直居中法，但前提是 li 行高不能为 normal 或未显式设置。常见坑：
-
line-height设得太小（如1），文字挤在圆圈下方 - 父容器用了
display: flex但没设align-items: center，导致li自身没垂直居中基准 - 圆圈宽高用
px固定，在高清屏上显得模糊，建议改用rem或em
想兼容 IE11？得降级处理
IE11 支持 counter，但不支持 flex 在伪元素里居中，且 transform: translateY() 对 ::before 兼容不稳定。稳妥做法是加一层内联标签替代伪元素：
<ol class="circle-list"> <li> <span class="circle">1</span> 选手A</li> <li> <span class="circle">2</span> 选手B</li> </ol>
然后给 .circle 写传统盒模型居中（vertical-align: middle + line-height 匹配高度）。不过现在绝大多数项目已放弃 IE11，真要支持才值得加这层冗余。
圆圈数字看着简单，但动真格做榜单时，序号逻辑、可访问性、响应式缩放、浏览器兼容这四点，漏掉任何一项都容易上线后返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
