如何使用 CSS Counters 获得悬挂缩进列表？答案

【问题标题】：How to gain hanging indent list with CSS Counters?如何使用 CSS Counters 获得悬挂缩进列表？
【发布时间】：2016-10-14 01:35:53
【问题描述】：

我正在尝试使用 CSS 计数器构建一个 3 级有序列表。

ol {
counter-reset: paragraph;
list-style-type: none;
margin-bottom: 1em;
font-weight: bold;
}

ol > li::before {
counter-increment: paragraph;
content: "§" counter(paragraph) " ";
}
...

有没有办法准确缩进第一级和第二级？

我知道有一种方法可以使用类似的东西

text-indent: -10px; padding-left: 10px;

但计数器的大小会随着字体大小或数字的增加而变化。

http://codepen.io/ekadagami/pen/ezZEbo

【问题讨论】：

不太明白这个问题。当字体大小改变或有更大的数字时，计数器的大小总是会改变，对吧？
定位伪元素？ - codepen.io/Paulie-D/pen/oLxGeW
或者你的意思是 negative text-indent - codepen.io/Paulie-D/pen/pbyWdM
@Paulie_D - 当然。类型。负文本缩进。
@Harry - 已解决。不要混淆。如果一个人感到困惑就足够了——通常是我。

标签： css html-lists css-content

【解决方案1】：

这不是我的原始代码，但对于那些想要无限深度的替代解决方案的人来说，值得重复。

我迟到了，但以下解决方案最适合我：

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

链接：

gist
jfiddle

【讨论】：

【解决方案2】：

@Paulie_D 通过定位伪元素来做到这一点：

ol > li {
  position: relative;
}

ol > li::before {
    counter-increment: paragraph;
    content: "§" counter(paragraph) " ";
    position: absolute;
    left: -1.5em;
}

http://codepen.io/Paulie-D/pen/oLxGeW

谢谢。

【讨论】：