使用CSS实现带彩色圆圈编号且兼容Strong标签的有序列表-html教程-PHP中文网

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

碧海醫心

发布： 2025-11-21 12:57:05

原创

867人浏览过

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

本文探讨了如何使用纯CSS为有序列表创建带有彩色圆形编号的自定义样式，同时确保列表内容（包括语义化的标签）能够正确渲染并自动缩进换行文本。通过结合CSS计数器、伪元素和定位属性，我们提供了一个优雅且易于维护的解决方案，避免了传统方法中遇到的缩进问题或与display: flex的冲突。

在现代网页设计中，对列表进行自定义样式是常见的需求，尤其是在需要突出显示步骤或重要信息时。其中一个常见的设计模式是为有序列表的编号添加彩色圆形背景。然而，实现这种效果时，开发者常会遇到一些挑战，例如文本换行时的缩进问题，或与HTML语义化标签（如）的兼容性冲突。

自定义编号列表的常见挑战

最初，开发者可能会尝试使用CSS伪元素::before结合counter-reset和counter-increment来实现自定义编号。这种方法可以有效地改变编号的视觉样式，例如添加背景色和圆形边框。然而，一个普遍的问题是，当列表项的文本内容过长而换行时，第二行文本不会自动缩进以对齐第一行，而是会从列表项的起始位置开始，导致视觉上的不协调。

为了解决缩进问题，一些开发者会转向使用display: flex布局。通过将列表项（<li>）设置为display: flex，并将编号伪元素（::before）作为其子项，可以轻松实现文本的自动缩进和对齐。然而，这种方法有时会意外地影响列表项内部其他元素的渲染，特别是像这样的行内元素。在某些情况下，标签内的文本可能会失去其预期的粗体样式，或者在视觉上出现异常，这与flex容器内部的文本处理机制有关。

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

为了规避这些问题，一些开发者可能会采取在每个<li>内部嵌套标签的变通方案。例如：<li>Click on the Inbox in the global navigation.</li>。虽然这种方法能够解决显示问题，但它增加了HTML结构的复杂性，降低了代码的可读性和可维护性，对于不熟悉复杂HTML结构的同事来说，使用起来并不方便。更重要的是，它违背了编写简洁、语义化HTML的原则。

优雅的CSS解决方案

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

核心思路是：

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

移除默认列表样式：使用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处开始，并正确地自动缩进。