How to use list-style-type decimal but without the dots [duplicate]

Question

Hi,

list-style-type decimal shows lists like this:

1. apple
2. pear
3. whatever

but I dont need the dot so it looks like this:

1 apple
2 pear
3 whatever

is it possible?

Thank you.

Answer 1

Use CSS Counters or CSS Markers. Ordered lists have a default counter named list-item you don't have to reset or increment, so the following is equivalent when using the default 0+1 ordering (starting at 0 and incrementing by 1)^✻

^{✻ Thanks goes out to fcrozatier for pointing out the default behavior of list-item of an <ol>.}

html {
  font: 300 2ch/1.2 'Segoe UI'
}

/* ::before Solution */
.A {
  list-style: none;
  margin-left: -1rem;
}

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

/* ::marker Solution */
.B li {
  list-style: none;
  padding: 0;
}

.B li::marker {
  content: counter(list-item)"\a0\a0";
}

<ol>
  <li>Default style of &lt;ol&gt;</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

<ol class='A'>
  <li>Custom style using <code>::before</code> pseudo-element</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

<ol class='B'>
  <li>Custom style using <code>::marker</code> pseudo-element</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>