如何让有序列表ol的::marker可选中以复制带编号内容？

由于浏览器默认的::marker伪元素本身不支持被选中复制，即使设置user-select: all也无法生效，你可以通过用::before伪元素模拟有序列表编号的方式解决，生成的编号能被正常选中复制。

适用于Stylus扩展的CSS代码 #

ol {
  /* 禁用原生默认编号 */
  list-style: none;
  /* 初始化计数器 */
  counter-reset: list-counter;
  padding-left: 0; /* 根据页面样式调整缩进 */
}

ol li {
  counter-increment: list-counter;
  position: relative;
  padding-left: 2em; /* 给自定义编号预留空间，可按需调整 */
}

ol li::before {
  /* 生成带后缀的连续编号 */
  content: counter(list-counter) ". ";
  /* 将编号定位到列表项左侧 */
  position: absolute;
  left: 0;
  /* 确保编号可被选中复制 */
  user-select: text;
}

方案说明 #

1. 先禁用原生list-style，避免默认marker和自定义编号冲突
2. 通过CSS计数器counter-reset和counter-increment实现和原生有序列表一致的连续编号逻辑
3. 用::before伪元素生成编号并定位，同时设置user-select: text确保编号可被选中复制
4. 可根据目标页面的实际样式，调整padding-left参数，让编号和列表内容的间距更协调

设置完成后，复制有序列表时，编号会和列表内容一同被复制，完整保留顺序上下文。

内容的提问来源于stack exchange，提问作者Bion Alex Howard