如何使用list-style-type decimal但没有点

Question

嗨,

list-style-type decimal显示如下列表:

1. apple
2. pear
3. whatever

但我不需要点,所以它看起来像这样:

1 apple
2 pear
3 whatever

可能吗？

谢谢.

Answer 1

使用CSS计数器

.list {
  counter-reset: number;
  list-style-type: none;
}

/* The "\a0" is a space */
.list li::before {
  counter-increment: number;
  content: counter(number)"\a0";
}

<ol class='list'>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>