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

/* 有序列表容器样式 */
.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;
}

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

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

/* 有序列表容器样式 */
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; /* 数字水平居中 */
}

<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>