如何使用 CSS 计数器获得悬挂缩进列表？

Question

我正在尝试构建一个包含 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) " ";
}
...

有没有办法准确缩进第 1 级和第 2 级？

我知道有一种方法可以使用

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

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

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

Answer 1

@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

谢谢。

Answer 2

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

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

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

如何使用 CSS 计数器获得悬挂缩进列表？

How to gain hanging indent list with CSS Counters?

css

html-lists

css-content