CSS:删除列表样式类型的句点:十进制

JRO*_*ROB 3 css

我有一个使用十进制列表样式的OL:

ol li {
  list-style-type: decimal;
}

<ol>
  <li>First</li>
  <li>Second</li>
</ol>
Run Code Online (Sandbox Code Playgroud)

编号工作正常,但是如何删除句点?而不是显示:

1. First
2. Second
Run Code Online (Sandbox Code Playgroud)

我想展示:

1 First
2 Second
Run Code Online (Sandbox Code Playgroud)

zzz*_*Bov 5

您需要使用自定义计数器和生成的内容。没有list-style-type允许该格式的预定义。

ol {
  counter-reset: list;
  list-style: none;
}
li {
  counter-increment: list;
  position: relative;
}
li:before {
  content: counter(list);
  margin-right: 5px;
  position: absolute;
  right: 100%;
}
Run Code Online (Sandbox Code Playgroud)
<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>
Run Code Online (Sandbox Code Playgroud)