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


Tags: php,html,css,list,html-lists

Problem :

This question already has an answer here:

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


Solution :

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


    CSS Howto..

    How do I deal with the issue of my divs being distorted greatly when zoomed in?

    How to make a css navigation menu “selected” option still clickable

    CSS: How to make drop down children to at least fill parent width

    How to use :before for the third
  • element?
  • Dojo: how to find css definition for digit.form.filteringselect, especially the drop down list?

    jQuery - How to revert css changes when using slideToggle()?

    How to make the menu contents center aligned?

    How to remove css files?

    How to remove reference of specific CSS files files from View

    CSS, how to align a button vertically next to large images

    Tag name in CSS selector (e.g. div#id): how is it read? (Left to right or right to left?) [duplicate]

    how to style a horizontal submenu with nested

      How to add the css properties to an image in ImageResourceCell of CellTable

      How to begin typing from vertical middle of textarea

      How to hover mutiple “div” in the same time?

      How can I improve this mobile site? [closed]

      How to remove the empty space between divs in CSS?

      How to addStyleNames “Multiple css classes” into 1 element in UiBinder in GWT?

      How do I organize imports in Compass/Blueprint?

      Why the space after the table, and how to remove it?

      How do I make two arrows in css

      How to crop Google GeoChart and center its content?

      How do I find space between lines in HTML?

      How to find class =“class1” included class=“class2” in CSS? [closed]

      How to set ASP dropdownlist to read only with css or javascript?

      How can i change or remove title and page address?

      how to link stylesheet in css

      How to reverse the text with js/css? [duplicate]

      How would I go about having placeholder divs that are then “overwritten” later with PHP?

      How do I add an attribute to a specific CSS class?