CODEWITHSUNDEEP
css
MultiDev
MultiDev

Reputation: 10649

CSS: Removing the period in list-style-type: decimal

I have an ol using decimal list styles:

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

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

The numbering is working fine, but how do I remove the period? Instead of showing:

1. First
2. Second

I want to show:

1 First
2 Second

Upvotes: 5

Views: 1216

Answers (1)

zzzzBov
zzzzBov

Reputation: 179086

You'll need to use a custom counter and generated content. There isn't a pre-defined list-style-type that allows for that format.

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%;
}
<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>

Upvotes: 7

Related Questions