使用CSS实现带彩色圆圈编号且兼容Strong标签的有序列表

优雅的CSS解决方案

为了克服上述挑战，我们可以采用一种更优雅的纯CSS方法，它结合了CSS计数器、伪元素和绝对定位，从而在不影响列表内容（包括标签）正常渲染的前提下，实现带有彩色圆形编号的自动缩进有序列表。

Pixelfox AI

多功能AI图像编辑工具

2108

查看详情

核心思路是：

1. 移除默认列表样式：使用list-style: none取消浏览器默认的编号。
2. 设置计数器：在ol元素上使用counter-reset初始化计数器，并在li元素上使用counter-increment递增计数。
3. 相对定位列表项：将li元素设置为position: relative，为其内部的绝对定位元素提供定位上下文。
4. 绝对定位编号：使用::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标签，因此通常具有良好的可访问性。

这种方法为前端开发者提供了一个强大且灵活的工具，以实现美观且功能完善的自定义有序列表。