本文探讨了如何使用纯CSS为有序列表创建带有彩色圆形编号的自定义样式，同时确保列表内容（包括语义化的标签）能够正确渲染并自动缩进换行文本。通过结合CSS计数器、伪元素和定位属性，我们提供了一个优雅且易于维护的解决方案，避免了传统方法中遇到的缩进问题或与display: flex的冲突。
在现代网页设计中，对列表进行自定义样式是常见的需求，尤其是在需要突出显示步骤或重要信息时。其中一个常见的设计模式是为有序列表的编号添加彩色圆形背景。然而，实现这种效果时，开发者常会遇到一些挑战，例如文本换行时的缩进问题，或与HTML语义化标签（如）的兼容性冲突。
自定义编号列表的常见挑战
最初，开发者可能会尝试使用CSS伪元素::before结合counter-reset和counter-increment来实现自定义编号。这种方法可以有效地改变编号的视觉样式，例如添加背景色和圆形边框。然而，一个普遍的问题是，当列表项的文本内容过长而换行时，第二行文本不会自动缩进以对齐第一行，而是会从列表项的起始位置开始，导致视觉上的不协调。
为了解决缩进问题，一些开发者会转向使用display: flex布局。通过将列表项（
立即学习“前端免费学习笔记（深入）”；
为了规避这些问题，一些开发者可能会采取在每个
标签的变通方案。例如：
Click on the Inbox in the global navigation.
优雅的CSS解决方案
为了克服上述挑战，我们可以采用一种更优雅的纯CSS方法，它结合了CSS计数器、伪元素和绝对定位，从而在不影响列表内容（包括标签）正常渲染的前提下，实现带有彩色圆形编号的自动缩进有序列表。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
核心思路是：
- 移除默认列表样式：使用list-style: none取消浏览器默认的编号。
- 设置计数器：在ol元素上使用counter-reset初始化计数器，并在li元素上使用counter-increment递增计数。
- 相对定位列表项：将li元素设置为position: relative，为其内部的绝对定位元素提供定位上下文。
- 绝对定位编号：使用::before伪元素生成编号，并将其设置为position: absolute。通过调整left属性，将编号精确地定位在列表项内容的左侧，从而允许列表项内容正常流动并自动缩进。
这种方法的好处在于，::before伪元素作为独立定位的元素，不会干扰li元素内部的文本流和等行内元素的渲染，同时解决了换行文本的缩进问题。
示例代码
以下是实现这种效果的CSS和HTML代码：
CSS 代码:
/* 整体有序列表设置 */
ol {
counter-reset: count; /* 初始化计数器 */
list-style: none; /* 移除默认列表标记 */
padding: 10px 50px; /* 为列表内容和编号预留空间 */
font-weight: 500; /* 列表项文本的默认字重 */
}
/* 列表项设置 */
ol li {
margin: 0 0 0.5rem 0; /* 列表项之间的间距 */
counter-increment: count; /* 递增计数器 */
position: relative; /* 为伪元素提供定位上下文 */
}
/* 编号伪元素设置 */
ol li::before {
content: counter(count); /* 显示计数器值作为编号 */
color: #fff; /* 编号颜色 */
font-size: .8rem; /* 编号字体大小 */
font-weight: bold; /* 编号字重 */
position: absolute; /* 绝对定位 */
--size: 23px; /* 定义一个CSS变量，方便调整圆圈大小 */
left: calc(-1 * var(--size) - 10px); /* 精确计算编号的左侧位置，使其位于列表项内容外部 */
line-height: var(--size);/* 使编号垂直居中 */
width: var(--size); /* 圆圈宽度 */
height: var(--size); /* 圆圈高度 */
background: #a1a; /* 圆圈背景色 */
border-radius: 50%; /* 使其成为圆形 */
text-align: center; /* 编号水平居中 */
}HTML 结构:
<ol> <li>Peaches</li> <li>Apples</li> <li>Plums</li> <li>Click on the <strong>Inbox</strong> in the global navigation. This is a very long sentence that needs to wrap to the next line to demonstrate the indentation.</li> <li>Another item with <strong>important</strong> text.</li> </ol>
关键属性解析：
- ol { padding: 10px 50px; }：这里的padding-left: 50px为列表项内容提供了足够的左侧空间，以容纳绝对定位的编号。left: calc(-1 * var(--size) - 10px);中的-10px就是为了将编号放置在这个padding区域内，距离列表项文本适当的距离。
- ol li { position: relative; }：这是实现绝对定位编号的关键。它将li元素设置为伪元素::before的参照物。
- ol li::before { position: absolute; left: calc(-1 * var(--size) - 10px); ... }：
- position: absolute;使编号脱离文档流，可以精确控制其位置。
- --size: 23px;定义了一个CSS变量，方便统一调整编号圆圈的大小。
- left: calc(-1 * var(--size) - 10px);是计算编号水平位置的核心。它将编号放置在li元素内容区域的左侧（负值），具体位置是圆圈宽度加上10像素的间距。这样，编号就会在列表项内容的左边，而列表项文本则会从li的padding-left处开始，并正确地自动缩进。
总结与注意事项
通过上述CSS技术，我们成功创建了带有彩色圆形编号的有序列表，同时解决了换行文本的缩进问题，并确保了等语义化标签的正常渲染。这种方法具有以下优点：
- 语义化：HTML结构保持简洁，不需额外的嵌套标签。
- 兼容性：避免了display: flex可能带来的与某些行内元素（如）的冲突。
- 可维护性：CSS代码集中管理样式，易于调整和扩展。
- 灵活性：通过调整CSS变量--size和left计算中的间距，可以轻松自定义编号的大小和位置。
在使用此方法时，请注意以下几点：
- 浏览器兼容性：CSS计数器和伪元素在现代浏览器中支持良好，但在非常旧的浏览器中可能存在限制。
- 响应式设计：考虑在不同屏幕尺寸下调整font-size、--size和left计算，以确保在移动设备上也有良好的视觉效果。
- 可访问性：确保自定义样式不会影响屏幕阅读器对列表内容的正确解读。本方案由于保留了语义化的ol和li标签，因此通常具有良好的可访问性。
这种方法为前端开发者提供了一个强大且灵活的工具，以实现美观且功能完善的自定义有序列表。
