How to remove dot '.' from CSS list-style:decimal [duplicate]

Question

Is there any way to remove the DOT after the decimal numbers in List style?

My CSS

.snum li {list-style:decimal outside none;}

The result i was getting like this (not including PHP and HTML code)

1. MILK
2. SOYA
3. BEANS
4. GARLIC

Desired Outpiut should be like this.

1 MILK
2 SOYA
3 BEANS
4 GARLIC

Allantoid

You could try using a counter https://mcmap.net/q/361246/-html-css-numbered-list-with-numbers-inside-of-circles – Alloplasm

It looks better with the decimal anyways. Sometimes the answer you didn't want to hear is the correct one. If you looked at #5945661 and that was not your solution and you must remove the period, maybe you don't want to use lists at all. – Cambrai

Answer 1

You can do this by implementing a custom counter as a pseudo-element before each <li> on your ordered list:

HTML:

<ol>
    <li>STUFF</li>
    <li>Stuff</li>
    <li>Stuff</li>
</ol>

CSS:

ol
{
    list-style: none;
    margin-left: 0;
}

li
{
    counter-increment: custom;
}

ol li:before
{
    content: counter(custom) " ";   
}

ol li:first-child {
    counter-reset: custom;
}

JSFiddle

Foetor

What about with lower-alpha and such? Also TIL about the counter() function – Globular

Found the answer: content: counter(chapter, lower-alpha); (credit to David SRM https://mcmap.net/q/335333/-css-pseudo-element-counters-can-you-increment-an-alphabet-letter-quot-a-quot-quot-b-quot-quot-c-quot-etc-instead-of-a-number) – Globular