如何实现自定义编号的HTML列表？能否设置任意字符串前缀？

一、创建你需要的层级编号列表（1. / 2a. 格式） #

默认HTML有序列表无法自动将父项编号与子项字母组合，用CSS计数器可以轻松实现：

HTML结构 #

<ol class="main-list">
  <li>Note 1</li>
  <li>Note 2
    <ol class="sub-list">
      <li>Subnote</li>
    </ol>
  </li>
</ol>

CSS样式 #

.main-list {
  counter-reset: main-num;
  list-style: none;
  padding-left: 0;
}

.main-list > li {
  counter-increment: main-num;
  position: relative;
  padding-left: 2em;
  margin: 0.5em 0;
}

.main-list > li::before {
  content: counter(main-num) ". ";
  position: absolute;
  left: 0;
  font-weight: normal;
}

.sub-list {
  counter-reset: sub-char;
  list-style: none;
  padding-left: 1.5em;
}

.sub-list > li {
  counter-increment: sub-char;
  position: relative;
  padding-left: 2em;
}

.sub-list > li::before {
  content: counter(main-num) counter(sub-char, lower-alpha) ". ";
  position: absolute;
  left: 0;
}

二、为列表编号设置任意字符串的可行方案 #

你之前用<ul>加value属性无效是正常的：<ul>是无序列表，本身不支持编号；而value属性仅适用于<ol>的<li>，且只能接受整数，无法设置字符串。

要实现任意自定义字符串编号，推荐两种实用方法：

方法1：利用data属性+CSS伪元素（完全自定义） #

适合需要完全独立的任意字符串编号场景：

<ul class="custom-label-list">
  <li data-label="X-">自定义项1</li>
  <li data-label="Y-">自定义项2</li>
  <li data-label="Z-">自定义项3</li>
</ul>

.custom-label-list {
  list-style: none;
  padding-left: 0;
}

.custom-label-list > li {
  position: relative;
  padding-left: 2em;
  margin: 0.5em 0;
}

.custom-label-list > li::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
}

方法2：CSS计数器+自定义前缀（规律化自定义） #

适合带固定前缀的编号场景（比如前缀+数字）：

<ol class="prefix-number-list">
  <li>规律项1</li>
  <li>规律项2</li>
</ol>

.prefix-number-list {
  counter-reset: seq-num;
  list-style: none;
  padding-left: 0;
}

.prefix-number-list > li {
  counter-increment: seq-num;
  position: relative;
  padding-left: 3em;
  margin: 0.5em 0;
}

.prefix-number-list > li::before {
  content: "订单-" counter(seq-num) ". ";
  position: absolute;
  left: 0;
}

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