2

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
Prime
  • 3,530
  • 5
  • 28
  • 47
  • You could try using a counter http://stackoverflow.com/a/5742176/1353011 – Musa Feb 13 '15 at 00:37
  • It looks better with the decimal anyways. Sometimes the answer you didn't want to hear is the correct one. If you looked at http://stackoverflow.com/questions/5945161/html-css-ordered-list-without-the-period and that was not your solution and you must remove the period, maybe you don't want to use lists at all. – StackSlave Feb 13 '15 at 00:38

1 Answers1

7

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

Liftoff
  • 24,717
  • 13
  • 66
  • 119