如何通过CSS指定列表起始值？自定义列表编号问题求助

问题背景 #

现有自定义有序列表结构，通过styletype属性指定列表类型（如字母、数字），start属性指定起始编号，同时每个列表项需添加data-prefix和data-suffix前缀后缀。目前仅能手动指定1-5的起始值，尝试用calc(attr(start, number) - 1)动态设置计数器初始值失败，列表始终从2开始。

HTML结构示例：

<ol styletype="A" start="5">
  <li data-prefix="Pre" data-suffix="Suf">Item 1</li>
  <li data-prefix="Pre" data-suffix="Suf">Item 2</li>
  <li data-prefix="Pre" data-suffix="Suf">Item 3</li>
</ol>

原CSS（仅支持1-5起始值）：

/* Default start value */
ol {
  counter-reset: item;
}

/* Custom start values */
ol[start="2"] {
  counter-reset: item 0;
}

ol[start="3"] {
  counter-reset: item 1;
}

ol[start="4"] {
  counter-reset: item 2;
}

ol[start="5"] {
  counter-reset: item 3;
}

/* Decimal (1, 2, 3, ...) */
ol[styletype="1"] > li::before {
  content: attr(data-prefix) "." counter(item, decimal) "." attr(data-suffix);
  position: absolute;
  left: 0;
  white-space: nowrap;
  pointer-events: none;
  counter-increment: item;
}

解决方案 #

核心原因 #

CSS的attr()函数在counter-reset这类属性中无法直接参与calc()计算——目前浏览器仅在content属性中对attr()有完善支持，其他属性中attr(start, number)的解析存在兼容性问题，导致计算结果不符合预期。

实现方案：结合CSS变量与原生计数器逻辑 #

通过CSS变量传递start属性值，动态计算计数器初始值，同时兼容多种列表类型：

/* 基础样式：隐藏原生列表编号，设置定位基础 */
ol {
  list-style: none;
  position: relative;
  padding-left: 60px; /* 预留前缀后缀+编号的空间 */
  /* 绑定start属性到CSS变量，默认值为1 */
  --start: attr(start, number, 1);
  /* 计算计数器初始值：起始值-1 */
  counter-reset: item calc(var(--start) - 1);
}

/* 数字列表（decimal） */
ol[styletype="1"] > li::before {
  content: attr(data-prefix) "." counter(item, decimal) "." attr(data-suffix);
}

/* 小写字母列表（lower-alpha） */
ol[styletype="a"] > li::before {
  content: attr(data-prefix) "." counter(item, lower-alpha) "." attr(data-suffix);
}

/* 大写字母列表（upper-alpha） */
ol[styletype="A"] > li::before {
  content: attr(data-prefix) "." counter(item, upper-alpha) "." attr(data-suffix);
}

/* 小写罗马数字（lower-roman） */
ol[styletype="i"] > li::before {
  content: attr(data-prefix) "." counter(item, lower-roman) "." attr(data-suffix);
}

/* 大写罗马数字（upper-roman） */
ol[styletype="I"] > li::before {
  content: attr(data-prefix) "." counter(item, upper-roman) "." attr(data-suffix);
}

/* 通用列表项伪元素样式 */
ol > li::before {
  position: absolute;
  left: 0;
  white-space: nowrap;
  pointer-events: none;
  counter-increment: item;
}

验证示例 #

• 从第5个大写字母（E）开始：

<ol styletype="A" start="5">
  <li data-prefix="Pre" data-suffix="Suf">Item 1</li> <!-- 显示 Pre.E.Suf -->
  <li data-prefix="Pre" data-suffix="Suf">Item 2</li> <!-- 显示 Pre.F.Suf -->
  <li data-prefix="Pre" data-suffix="Suf">Item 3</li> <!-- 显示 Pre.G.Suf -->
</ol>

• 从小写字母b（第2个）开始：

<ol styletype="a" start="2">
  <li data-prefix="Pre" data-suffix="Suf">Item 1</li> <!-- 显示 Pre.b.Suf -->
</ol>

• 从罗马数字IV（第4个）开始：

<ol styletype="I" start="4">
  <li data-prefix="Pre" data-suffix="Suf">Item 1</li> <!-- 显示 Pre.IV.Suf -->
</ol>

关键注意点 #

• start属性的值必须为数字（即使是字母/罗马数字起始，也要用对应的序号，比如字母b对应2，罗马数字IV对应4），计数器基于数字递增，格式转换由counter()的第二个参数完成。
• 需根据前缀、后缀和编号的长度调整padding-left，避免内容重叠。
• 若需兼容旧版浏览器，可通过JavaScript动态设置CSS变量：

document.querySelectorAll('ol[start]').forEach(ol => {
  ol.style.setProperty('--start', ol.getAttribute('start'));
});

内容的提问来源于stack exchange，提问作者tmiliketurtles