CSS自定义有序列表：彩色数字标记与内容对齐的优雅实现

本教程探讨如何使用css优雅地创建带有彩色圆形数字标记的有序列表，同时确保多行文本的正确缩进和``等语义化标签的正常显示。通过结合`::before`伪元素与`position: relative`及`position: absolute`属性，我们能够将自定义标记定位在列表项内容流之外，从而解决传统方法中遇到的缩进和布局冲突问题，实现既美观又语义化的列表样式。

需求概述：构建美观且功能完善的有序列表

在网页设计中，我们经常需要对有序列表（<ol>）进行自定义样式，使其区别于浏览器默认的数字标记。一个常见的需求是为列表项的数字添加背景色，并将其显示为圆形，同时要求列表项内容（特别是多行文本）能够自动缩进对齐，并且内部的<strong>等语义化标签能够正常渲染，不影响整体布局或可访问性。

传统尝试与面临的挑战

在实现上述需求时，开发者通常会尝试几种方法，但每种方法都可能带来特定的挑战。

方法一：使用 ::before 伪元素与 list-style: none

这种方法通过移除默认的列表标记（list-style: none），然后利用 ::before 伪元素和 CSS counter 来生成自定义的数字标记。我们可以轻松地为 ::before 伪元素设置背景色、边框半径等，使其呈现为彩色圆形数字。

/* 有序列表容器样式 */
.round-number-list-b {
    margin-left: 0 !important;
    padding-left: 0 !important;
    counter-reset: item; /* 重置计数器 */
}
/* 列表项样式 */
.round-number-list-b > li {
    margin-left: 0;
    padding-left: 0;
    counter-increment: item; /* 增加计数器 */
    list-style: none inside; /* 移除默认标记 */
    margin-bottom: 0.5rem;
}
/* 数字标记伪元素样式 */
.round-number-list-b > li:before {
    display: inline-block; /* 使伪元素成为行内块级元素 */
    width: 1.5rem;
    aspect-ratio: 1/1; /* 保持宽高比为1:1，确保圆形 */
    content: counter(item); /* 显示计数器值 */
    padding: 0.1rem;
    margin-right: 1.2rem;
    font-weight: 900;
    color: white;
    background: #005577;
    border-radius: 5rem; /* 大半径确保圆形 */
    text-align: center;
}

挑战： 这种方法的主要问题在于，当列表项内容是多行文本时，第二行及后续行不会自动缩进，而是从列表项的最左侧开始，导致文本与数字标记无法对齐，影响可读性。

立即学习“前端免费学习笔记（深入）”；

方法二：采用 display: flex 布局

为了解决多行文本缩进问题，一些开发者会尝试在列表项 <li> 上应用 display: flex 布局。将 ::before 伪元素设置为 flex-shrink: 0，并调整其宽度，可以有效地使列表项内容与伪元素对齐，并实现多行文本的自动缩进。

.round-number-list > li {
    display: flex; /* 启用Flex布局 */
    align-items: flex-start; /* 确保内容从顶部对齐 */
}
.round-number-list > li:before {
    flex: 0 0 1.3rem; /* 固定伪元素的宽度，不伸缩 */
    /* 其他样式同方法一 */
}

挑战： display: flex 虽然解决了缩进问题，但它改变了 <li> 内部的布局上下文。这可能导致一些内联元素（如 <strong>）在某些浏览器或特定样式下表现异常，例如丢失样式或导致布局错乱，尤其是在复杂的文本结构中。虽然可以通过额外的CSS规则进行修复，但增加了复杂性。

Mokker AI

AI产品图添加背景

下载

方法三：在 <li> 内嵌套 <p> 标签

为了规避上述问题，一种直接但不够优雅的解决方案是在每个 <li> 内部包裹一个 <p> 标签，将所有内容放入 <p> 中。这样，<li> 负责数字标记，<p> 负责内容布局。

<li><p>Click on the <strong>Inbox</strong> in the global navigation.</p></li>

挑战： 这种方法虽然有效，但增加了 HTML 结构的冗余和复杂性。对于非专业编码人员来说，维护和使用这样的列表结构会变得更加困难，且不符合语义化的最佳实践。

优雅解决方案：基于 position 属性的 ::before 策略

最优雅且兼容性良好的解决方案是利用 CSS 的 position 属性，将 ::before 伪元素从列表项的正常文档流中分离出来，从而避免其对列表项内容布局的影响。

核心思想：

1. 为 <ol> 移除默认的列表样式，并重置计数器。
2. 为 <li> 设置 position: relative，使其成为 ::before 伪元素的定位上下文。
3. 为 ::before 伪元素设置 position: absolute，并精确计算其 left 属性，使其定位在 <li> 内容区域的左侧。

通过这种方式，::before 伪元素（即彩色数字圆圈）将独立于 <li> 内部的文本内容流。<li> 内部的文本将像没有自定义标记一样正常渲染，自动处理多行缩进，并且 <strong> 等语义化标签也不会受到干扰。

CSS 实现：

/* 有序列表容器样式 */
ol.custom-numbered-list {
  counter-reset: count; /* 重置计数器 */
  list-style: none; /* 移除默认列表标记 */
  padding: 10px 50px; /* 调整整体内边距，为数字标记预留空间 */
  font-weight: 500;
}

/* 列表项样式 */
ol.custom-numbered-list li {
  margin: 0 0 0.5rem 0; /* 列表项间距 */
  counter-increment: count; /* 增加计数器 */
  position: relative; /* 设置为定位上下文 */
  padding-left: 35px; /* 为数字标记预留左侧空间，确保文本起始位置 */
}

/* 数字标记伪元素样式 */
ol.custom-numbered-list li::before {
  content: counter(count); /* 显示计数器值 */
  color: #fff;
  font-size: .8rem;
  font-weight: bold;
  position: absolute; /* 绝对定位 */
  --size: 23px; /* 定义数字圆圈的尺寸 */
  /* 计算左侧定位：-1 * 圆圈宽度 - 圆圈与文本的间距 */
  left: calc(-1 * var(--size) - 10px); 
  /* 也可以直接指定一个固定值，例如 left: -35px; */
  line-height: var(--size); /* 行高与高度相等，实现数字垂直居中 */
  width: var(--size);
  height: var(--size);
  background: #a1a; /* 背景色 */
  border-radius: 50%; /* 圆形 */
  text-align: center; /* 数字水平居中 */
}

HTML 结构：

<ol class="custom-numbered-list">
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
  <li>Click on the <strong>Inbox</strong> in the global navigation to access your messages and notifications.</li>
  <li>This is a very long list item that will wrap onto multiple lines. Notice how the second line is perfectly indented, aligning with the first line of text, not with the number circle.</li>
</ol>

关键点与注意事项：

1. counter-reset 和 counter-increment: 这是创建自定义编号列表的基础。counter-reset 在 <ol> 上初始化计数器，counter-increment 在每个 <li> 上递增计数器。
2. list-style: none: 务必在 <ol> 上移除浏览器默认的列表标记，以避免与自定义标记冲突。
3. position: relative on <li>: 将 <li> 设置为相对定位，使其成为 ::before 伪元素的定位父级。这意味着 ::before 的 left/top 等属性将相对于 <li> 进行计算。
4. position: absolute on ::before: 将伪元素设置为绝对定位，使其脱离文档流。这是解决布局冲突的关键。
5. left 属性的计算与 padding-left:
   • calc(-1 * var(--size) - 10px) 是一种灵活的计算方式，它将数字圆圈定位在 <li> 内容区域的左侧。var(--size) 是数字圆圈的宽度，10px 是圆圈与列表项内容之间的期望间距。
   • 同时，ol li 上的 padding-left 也很重要。它为伪元素腾出空间，并决定了列表项文本的起始位置。确保 padding-left 的值大于或等于 var(--size) + 10px 的绝对值，以避免文本与数字重叠。